import { config } from "@/lib/config";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import Image from "next/image";
import Link from "next/link";
import ShaderBackground from "@/components/ShaderBackground";

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center p-4">
      <ShaderBackground />
      <Card className="w-full max-w-md overflow-hidden relative">
        <CardHeader className="flex flex-col items-center gap-4 text-center">
          <div className="relative w-24 h-24 overflow-hidden rounded-full">
            <Image 
              src={config.profile.avatar} 
              alt={config.profile.name}
              fill
              className="object-cover"
            />
          </div>
          <div>
            <h1 className="text-2xl font-bold">
              {config.profile.name}
            </h1>
            <p className="text-sm text-zinc-400 mt-1">
              {config.profile.desc}
            </p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-3">
          {config.links.map((item, index) => {
            const isStringIcon = typeof item.icon === "string";
            const IconComponent = !isStringIcon ? item.icon : null;

            return (
              <Button
                key={index}
                variant="outline"
                className="w-full h-auto p-4 group"
                asChild
              >
                <Link href={item.link} target="_blank" rel="noopener noreferrer" className="w-full">
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center gap-4">
                      <div className="shrink-0 w-8 h-8 flex items-center justify-center">
                        {isStringIcon ? (
                          <Image
                            src={item.icon as string}
                            alt={`${item.name} icon`}
                            width={24}
                            height={24}
                            className="object-contain"
                          />
                        ) : (
                          IconComponent && <IconComponent className="w-6 h-6 text-zinc-700 dark:text-zinc-300" />
                        )}
                      </div>
                      <div className="flex flex-col items-start text-left">
                        <span className="font-semibold text-zinc-900 dark:text-zinc-100">{item.name}</span>
                        {item.desc && <span className="text-xs text-zinc-500 dark:text-zinc-400">{item.desc}</span>}
                      </div>
                    </div>
                  </div>
                </Link>
              </Button>
            );
          })}
        </CardContent>
      </Card>
    </div>
  );
}