"use client";

import {
  Instagram,
  Twitter,
  Youtube,
  Mail,
  Globe,
  ShoppingBag,
  PlayCircle,
  Linkedin,
  Music2,
  type LucideIcon,
} from "lucide-react";
import type { LinkIcon, LinksInBioData } from "../types";
import { defaultData } from "../defaultData";

const ICONS: Record<LinkIcon, LucideIcon> = {
  instagram: Instagram,
  twitter: Twitter,
  tiktok: Music2,
  youtube: Youtube,
  spotify: Music2,
  apple: Music2,
  linkedin: Linkedin,
  email: Mail,
  globe: Globe,
  shop: ShoppingBag,
  play: PlayCircle,
};

export interface LinksInBioMinimalMonoProps {
  data?: LinksInBioData;
}

export default function LinksInBioMinimalMono({
  data = defaultData,
}: LinksInBioMinimalMonoProps) {
  return (
    <section
      className="min-h-screen w-full bg-background text-foreground flex items-start justify-center px-4 py-14 sm:py-20"
      style={{ fontFamily: "'Inter', system-ui, sans-serif", letterSpacing: "-0.01em" }}
    >
      <div className="w-full max-w-[400px]">
        <div className="flex flex-col items-center text-center">
          <img
            src={data.avatar}
            alt={data.name}
            width={96}
            height={96}
            loading="eager"
            className="h-24 w-24 rounded-full object-cover ring-1 ring-foreground/10"
          />
          <h1 className="mt-5 text-xl font-semibold tracking-tight">
            {data.name}
            {data.verified && (
              <span className="ml-1 inline-block translate-y-[-1px] text-foreground/60">
                ✓
              </span>
            )}
          </h1>
          {data.handle && (
            <p className="mt-1 text-sm text-foreground/50">{data.handle}</p>
          )}
          {data.bio && (
            <p className="mt-3 max-w-[320px] text-sm leading-relaxed text-foreground/70">
              {data.bio}
            </p>
          )}
        </div>

        <div className="mt-8 space-y-2">
          {data.links.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="group flex items-center justify-between rounded-md border border-foreground/15 bg-transparent px-4 py-3.5 text-sm font-medium text-foreground transition-colors hover:border-foreground/40 hover:bg-foreground/[0.03]"
            >
              <span className="truncate group-hover:underline group-hover:underline-offset-4">
                {link.label}
              </span>
              {link.badge && (
                <span className="ml-3 shrink-0 rounded-full bg-foreground px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-background">
                  {link.badge}
                </span>
              )}
            </a>
          ))}
        </div>

        {data.socials && data.socials.length > 0 && (
          <div className="mt-10 flex items-center justify-center gap-5 text-foreground/60">
            {data.socials.map((s, i) => {
              const Icon = ICONS[s.type] ?? Globe;
              return (
                <a
                  key={i}
                  href={s.href}
                  aria-label={s.type}
                  className="transition-colors hover:text-foreground"
                >
                  <Icon className="h-4 w-4" strokeWidth={1.5} />
                </a>
              );
            })}
          </div>
        )}

        <p className="mt-12 text-center text-[11px] uppercase tracking-[0.18em] text-foreground/35">
          Made with care
        </p>
      </div>
    </section>
  );
}