import Image from "next/image";
import type { CategoryBanner } from "@/data/category-showcases";

export function CategoryBannerStrip({ banners, onCategory }: { banners: CategoryBanner[]; onCategory: (id: string) => void }) {
  return (
    <div className={`category-banner-strip ${banners.length === 2 ? "category-banner-duo" : "category-banner-trio"}`}>
      {banners.map((item) => (
        <button type="button" key={item.image} className="category-promo-card" onClick={() => onCategory(item.categoryId)} aria-label={`Explore ${item.label}`}>
          <Image src={item.image} alt={item.label} fill sizes={banners.length === 2 ? "(max-width: 600px) 90vw, 45vw" : "(max-width: 600px) 30vw, 30vw"} />
        </button>
      ))}
    </div>
  );
}