/** کاشی‌های دسته‌بندی صفحه اصلی */
import Link from "next/link";
import { Icon, type IconName } from "@/components/ui/Icon";

export function CategoryTiles({ items }: { items: { name: string; href: string; icon: IconName }[] }) {
  return (
    <section className="container-z py-8" aria-labelledby="cats-title">
      <h2 id="cats-title" className="section-title mb-4">خرید بر اساس دسته</h2>
      <ul className="grid grid-cols-3 gap-3 sm:grid-cols-6">
        {items.map((c) => (
          <li key={c.href}>
            <Link href={c.href} className="flex aspect-square flex-col items-center justify-center gap-3 rounded-2xl bg-mist transition-colors hover:bg-fog">
              <Icon name={c.icon} size={34} strokeWidth={1.2} />
              <span className="text-xs font-medium">{c.name}</span>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}