import Image from "next/image";
import { ArrowRight, ArrowUpRight } from "lucide-react";
import { collections } from "@/data/storefront";

export function CollectionsSection({ onCollection }: { onCollection: (id: string) => void }) {
  return (
    <section id="collections" className="collections-section section-padding">
      <div className="section-title-row"><div><p className="eyebrow">SOMETHING FOR EVERYONE</p><h2>Find your everyday.</h2></div><span className="section-side-note">Four collections. Your own kind of style. <ArrowUpRight size={16} /></span></div>
      <div className="collections-grid">
        {collections.map((item, index) => (
          <button type="button" className="collection-card" key={item.id} onClick={() => onCollection(item.id)} aria-label={`Explore ${item.name.toLowerCase()}'s collection`}>
            <div className="collection-image-wrap"><Image src={item.image} alt={item.imageAlt} fill sizes="(max-width: 600px) 45vw, (max-width: 900px) 22vw, 19vw" className="collection-image" /><span className="collection-number">0{index + 1}</span><span className="collection-discover"><ArrowUpRight size={18} /></span></div>
            <div className="collection-card-caption"><span><strong>{item.name}</strong><small>{item.label}</small></span><ArrowRight size={16} /></div>
          </button>
        ))}
      </div>
    </section>
  );
}