import { Link } from "@tanstack/react-router";
import { categories, type Category, type Peptide } from "@/content/kennisbank/peptides";
import { tr, ui, useLang, type L10n } from "@/lib/kennisbank-i18n";

/**
 * `categoryLabel` comes from the loader (the admin panel can rename or add
 * categories); without it the card falls back to the labels in this codebase.
 */
type CardItem = Pick<Peptide, "slug" | "name" | "short"> & { category: string | null };

export function PeptideCard({ p, index, categoryLabel }: { p: CardItem; index: number; categoryLabel?: L10n | undefined }) {
  const lang = useLang();
  const label = categoryLabel ?? categories[p.category as Category];

  return (
    <Link
      to="/kennisbank/$slug"
      params={{ slug: p.slug }}
      className="group flex flex-col rounded-xl border border-border bg-card/50 p-5 backdrop-blur-md transition hover:border-primary/40"
    >
      <div className="flex items-center justify-between gap-2">
        <span className="font-mono text-[11px] text-foreground/40">{String(index + 1).padStart(2, "0")}</span>
        {label && (
          <span className="rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[10px] uppercase text-primary">{tr(label, lang)}</span>
        )}
      </div>
      <h3 className="mt-3 text-xl font-bold">{p.name}</h3>
      <p className="mt-2 flex-1 text-pretty text-sm text-muted-foreground leading-relaxed">{tr(p.short, lang)}</p>
      <span className="mt-4 inline-block text-xs font-medium text-primary">{tr(ui.readMore, lang)}</span>
    </Link>
  );
}