import { ArrivalTile } from "@/components/product/arrival-tile";
import { newArrivals } from "@/data/new-arrivals";

export function NewArrivalsSection({ onCollection }: { onCollection: (id: string) => void }) {
  return (
    <section id="new-arrivals" className="new-arrivals-section section-padding" aria-labelledby="new-arrivals-title">
      <div className="new-arrivals-heading">
        <h2 id="new-arrivals-title">New Arrival</h2>
        <p>New-season picks</p>
      </div>
      <div className="new-arrivals-grid">
        {newArrivals.map((item) => <ArrivalTile key={item.id} item={item} onCollection={onCollection} />)}
      </div>
    </section>
  );
}