import Link from "next/link";
import { CATEGORIES } from "@/lib/site";

interface CategoryChipProps {
  slug: string;
  name: string;
  active?: boolean;
}

/** Pill link for category navigation and filtering. */
export function CategoryChip({ slug, name, active = false }: CategoryChipProps) {
  return (
    <Link
      href={`/category/${slug}`}
      aria-current={active ? "page" : undefined}
      className={`inline-flex h-9 items-center rounded-full border px-4 text-sm font-medium transition-colors ${
        active
          ? "border-brand-500 bg-brand-600/20 text-white"
          : "border-slate-700 bg-slate-900 text-slate-300 hover:border-slate-500 hover:text-white"
      }`}
    >
      {name}
    </Link>
  );
}

/** Wrap-all-chips row used on home and listing pages. */
export function CategoryChipRow({ activeSlug }: { activeSlug?: string }) {
  return (
    <ul className="flex flex-wrap gap-2" aria-label="Game categories">
      {CATEGORIES.map((c) => (
        <li key={c.slug}>
          <CategoryChip
            slug={c.slug}
            name={c.name}
            active={activeSlug === c.slug}
          />
        </li>
      ))}
    </ul>
  );
}