import Link from "next/link";

/** Emoji keeps the category tiles colourful without shipping icon assets. */
const CATEGORY_ICONS: Record<string, string> = {
  Electronics: "🎧",
  Clothing: "🧥",
  Shoes: "👟",
  "Home & Kitchen": "🍳",
  Fitness: "🏋️",
  Accessories: "🎒",
  Beauty: "✨",
  Books: "📚",
};

const CATEGORY_BLURBS: Record<string, string> = {
  Electronics: "Audio, laptops and wearables",
  Clothing: "Everyday layers and outerwear",
  Shoes: "Road, trail and everyday footwear",
  "Home & Kitchen": "Cookware, coffee and comfort",
  Fitness: "Gear for the gym and the yoga mat",
  Accessories: "Bags, wallets and travel kit",
  Beauty: "Skincare, hair and suncare",
  Books: "Fiction, cookery and craft",
};

export function CategoryGrid({
  categories,
}: {
  categories: { name: string; count: number }[];
}) {
  return (
    <section aria-labelledby="categories-heading">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h2 id="categories-heading" className="text-2xl font-bold tracking-tight text-slate-900">
            Shop by category
          </h2>
          <p className="mt-1 text-sm text-slate-600">
            Every category is embedded separately, so filters narrow the vector search too.
          </p>
        </div>
        <Link
          href="/products"
          className="text-sm font-semibold text-indigo-700 hover:text-indigo-900 focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:outline-none"
        >
          Browse all products →
        </Link>
      </div>

      <ul className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
        {categories.map((category) => (
          <li key={category.name}>
            <Link
              href={`/products?category=${encodeURIComponent(category.name)}`}
              className="group flex h-full flex-col gap-1 rounded-2xl border border-slate-200 bg-white p-5 transition-all duration-200 hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:outline-none"
            >
              <span className="text-2xl" aria-hidden="true">
                {CATEGORY_ICONS[category.name] ?? "📦"}
              </span>
              <span className="mt-1 text-sm font-semibold text-slate-900">{category.name}</span>
              <span className="text-xs text-slate-500">
                {CATEGORY_BLURBS[category.name] ?? `${category.count} products`}
              </span>
              <span className="mt-2 text-xs font-medium text-indigo-600">
                {category.count} products
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}