import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { LucideIcon } from "lucide-react";

const SteamProfilePage = () => {
  return (
    <div className="bg-gray-900 min-h-screen text-white p-6">
      {/* Header Section */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-4">
          <Avatar className="w-24 h-24">
            <img
              src="https://via.placeholder.com/150"
              alt="Profile Avatar"
              className="rounded-full"
            />
          </Avatar>
          <div>
            <h1 className="text-3xl font-bold">Username</h1>
            <p className="text-gray-400">Level 50</p>
            <Badge variant="outline" className="mt-2">
              Online
            </Badge>
          </div>
        </div>
        <Button variant="secondary">Edit Profile</Button>
      </div>

      <Separator className="my-4" />

      {/* Showcase Section */}
      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-3">Showcase</h2>
        <div className="grid grid-cols-3 gap-4">
          <Card>
            <CardContent>
              <h3 className="font-bold text-lg">Favorite Game</h3>
              <p className="text-gray-400">Game Name</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <h3 className="font-bold text-lg">Achievement</h3>
              <p className="text-gray-400">"Achievement Title"</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <h3 className="font-bold text-lg">Hours Played</h3>
              <p className="text-gray-400">500+ Hours</p>
            </CardContent>
          </Card>
        </div>
      </div>

      <Separator className="my-4" />

      {/* Friends Section */}
      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-3">Friends</h2>
        <div className="grid grid-cols-5 gap-4">
          {Array.from({ length: 5 }).map((_, index) => (
            <div key={index} className="flex flex-col items-center">
              <Avatar className="w-16 h-16">
                <img
                  src={`https://via.placeholder.com/150?text=Friend+${index + 1}`}
                  alt={`Friend ${index + 1}`}
                  className="rounded-full"
                />
              </Avatar>
              <p className="text-sm mt-2">Friend {index + 1}</p>
            </div>
          ))}
        </div>
      </div>

      <Separator className="my-4" />

      {/* Recent Activity Section */}
      <div>
        <h2 className="text-xl font-semibold mb-3">Recent Activity</h2>
        <div className="space-y-4">
          <Card>
            <CardContent>
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="font-bold">Game Name</h3>
                  <p className="text-gray-400">2 hours played recently</p>
                </div>
                <Button variant="secondary">View</Button>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent>
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="font-bold">Another Game</h3>
                  <p className="text-gray-400">10 hours played recently</p>
                </div>
                <Button variant="secondary">View</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default SteamProfilePage;