import Image from "next/image";
import { ChevronRight } from "lucide-react";
import { Fragment } from "react";
import { CategoryBannerStrip } from "./category-banner-strip";
import { CategoryShowcaseSection } from "./category-showcase-section";
import { categoryShowcases, openingBannerRows } from "@/data/category-showcases";

export function CategorySections({ onCategory }: { onCategory: (id: string, productId?: string) => void }) {
  return (
    <div id="collections" className="category-sections section-padding">
      <div className="opening-category-banners">
        {openingBannerRows.map((banners) => <CategoryBannerStrip key={banners[0].image} banners={banners} onCategory={onCategory} />)}
      </div>
      <section className="fabric-story" aria-labelledby="fabric-story-title">
        <div><h2 id="fabric-story-title">Fashion Mart <ChevronRight size={24} /></h2><h3>Because comfort and confidence go hand in hand.</h3><p>Comfortable clothing, considered details and everyday favourites. Find pieces that feel like you, for every occasion.</p></div>
        <div className="fabric-story-image"><Image src="/images/categories/fabrics.webp" alt="A selection of soft neutral and navy fabrics" fill sizes="(max-width: 600px) 90vw, 30vw" /></div>
      </section>
      {categoryShowcases.map((category) => (
        <Fragment key={category.id}>
          <CategoryShowcaseSection category={category} onCategory={onCategory} />
          {category.bannersAfter && <CategoryBannerStrip banners={category.bannersAfter} onCategory={onCategory} />}
        </Fragment>
      ))}
    </div>
  );
}