'use client';

import {
  Import,
  Shirt,
  StretchHorizontal,
  Scissors,
  LayoutGrid,
  CloudSnow,
  type LucideIcon,
} from 'lucide-react';
import { categories } from '@/lib/products-data';

/* ── Map icon name strings to Lucide components ────────── */
const ICON_MAP: Record<string, LucideIcon> = {
  Import,
  Shirt,
  StretchHorizontal,
  Scissors,
  LayoutGrid,
  CloudSnow,
};

export default function CategoryGrid() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
      {/* Section heading */}
      <div className="mb-8 text-center">
        <h2 className="font-heading text-2xl font-bold text-gray-900 md:text-3xl">
          Shop by Category
        </h2>
        <p className="mt-2 text-sm text-gray-500 md:text-base">
          Browse our curated collections for every occasion
        </p>
      </div>

      {/* 6-column grid */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6 lg:gap-6">
        {categories.map((cat) => {
          const Icon = ICON_MAP[cat.icon] ?? LayoutGrid;

          return (
            <a
              key={cat.name}
              href="#"
              className={`group flex flex-col items-center rounded-2xl bg-gradient-to-br ${cat.gradient} p-6 text-center shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg`}
            >
              {/* Icon container */}
              <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-brand/10 lg:h-16 lg:w-16">
                <Icon className="h-6 w-6 text-brand lg:h-7 lg:w-7" />
              </div>

              {/* Category name */}
              <h3 className="text-sm font-semibold text-gray-800 group-hover:text-brand">
                {cat.name}
              </h3>

              {/* Item count */}
              <p className="mt-0.5 text-xs text-gray-500">
                {cat.itemCount} items
              </p>
            </a>
          );
        })}
      </div>
    </section>
  );
}
