import Image from "next/image";
import { ArrowUpRight } from "lucide-react";
import { CategoryProductTile } from "@/components/product/category-product-tile";
import type { CategoryShowcase } from "@/data/category-showcases";

export function CategoryShowcaseSection({ category, onCategory }: { category: CategoryShowcase; onCategory: (id: string, productId?: string) => void }) {
  return (
    <section id={`category-${category.id}`} className="category-showcase-section" aria-labelledby={`category-${category.id}-title`}>
      <div className="category-showcase-heading">
        <h2 id={`category-${category.id}-title`}>{category.title}</h2>
        <button type="button" onClick={() => onCategory(category.id)}>View all <ArrowUpRight size={13} /></button>
      </div>
      <div className="category-mosaic">
        <button type="button" className="category-feature-image" onClick={() => onCategory(category.id)} aria-label={`Explore ${category.title}`}>
          <Image src={category.heroImage} alt={category.title} fill sizes="(max-width: 600px) 90vw, (max-width: 1050px) 45vw, 30vw" />
        </button>
        <div className="category-product-grid">
          {category.products.map((product, index) => (
            <CategoryProductTile key={product.id} product={product} categoryTitle={category.title} viewMore={index === category.products.length - 1} onClick={() => onCategory(category.id, index === category.products.length - 1 ? undefined : product.id)} />
          ))}
        </div>
      </div>
    </section>
  );
}