import Image from 'next/image';
import Link from 'next/link';
import { ROUTES } from '@/lib/routes';
import { categoryImage } from '@/lib/category-images';
import type { Category } from '@/lib/types';

export function CategoryShowcase({ categories }: { categories: Category[] }) {
  if (categories.length === 0) return null;

  return (
    <section className="py-16">
      <div className="container-page">
        <h2 className="section-title">Made by You. Discovered by More.</h2>
        <p className="mx-auto mt-3 max-w-xl text-center text-sm text-navy-600">
          Showcase the beauty of Sri Lankan craftsmanship across a wide range of categories.
        </p>

        <div className="mt-10 grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-5">
          {categories.slice(0, 5).map((category) => (
            <Link
              key={category.name}
              href={`${ROUTES.shop}?category=${encodeURIComponent(category.name)}`}
              className="group relative aspect-square overflow-hidden rounded-lg shadow-sm transition hover:-translate-y-1 hover:shadow-md"
            >
              <Image
                src={categoryImage(category.name, category.image)}
                alt={category.name}
                fill
                sizes="(min-width: 1024px) 20vw, (min-width: 640px) 30vw, 45vw"
                className="object-cover transition duration-300 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-navy-900/80 via-navy-900/10 to-transparent" />
              <span className="absolute inset-x-0 bottom-0 bg-navy-800/90 px-2 py-2 text-center text-xs font-semibold text-white">
                {category.name}
              </span>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}