import Link from "next/link";
import { Users, User } from "lucide-react";
import type { CoStar } from "@/lib/db/queries";
import { portraitUrl } from "@/lib/assetUrls";

export function CoStarsRow({ actressName, costars }: { actressName: string; costars: CoStar[] }) {
  if (costars.length === 0) return null;
  return (
    <section className="my-6">
      <div className="flex items-center gap-2 mb-3">
        <Users className="w-4 h-4 text-[var(--color-fg-muted)]" />
        <h2 className="text-xs uppercase tracking-wider font-mono text-[var(--color-fg-muted)]">
          Frequent co-stars
        </h2>
        <span className="text-[10px] font-mono text-[var(--color-fg-muted)]">
          ({costars.length})
        </span>
      </div>
      <div className="flex flex-wrap gap-2">
        {costars.map((c) => (
          <Link
            key={c.id}
            href={`/actress/${c.slug}`}
            title={`${c.shared} cover${c.shared === 1 ? "" : "s"} with ${actressName}`}
            className="group flex items-center gap-2 pl-1 pr-3 py-1 rounded-full glass glass-hover"
          >
            <span className="relative w-7 h-7 rounded-full overflow-hidden bg-[var(--color-bg-2)] shrink-0">
              {c.portraitPath ? (
                /* eslint-disable-next-line @next/next/no-img-element */
                <img
                  src={portraitUrl({ path: c.portraitPath, slug: c.slug, slot: "1" })}
                  alt={c.name}
                  draggable={false}
                  className="absolute top-1/2 left-1/2 max-w-none origin-center pointer-events-none"
                  style={{
                    transform: `translate(-50%, -50%) translate(${c.portraitOffsetX}px, ${c.portraitOffsetY}px) scale(${c.portraitZoom})`,
                    width: 28,
                    height: "auto",
                  }}
                />
              ) : (
                <span className="absolute inset-0 grid place-items-center text-[var(--color-fg-muted)]">
                  <User className="w-3.5 h-3.5" />
                </span>
              )}
            </span>
            <span className="text-sm">{c.name}</span>
            <span className="text-[10px] font-mono text-[var(--color-cyan)]">{c.shared}</span>
          </Link>
        ))}
      </div>
    </section>
  );
}