import Image from "next/image";
import type { NewArrivalItem } from "@/data/new-arrivals";

export function ArrivalTile({ item, onCollection }: { item: NewArrivalItem; onCollection: (id: string) => void }) {
  return (
    <button
      type="button"
      className="arrival-tile"
      onClick={() => onCollection(item.collectionId)}
      aria-label={`${item.name} — explore the ${item.collectionId} collection`}
      title={item.name}
    >
      <Image
        src={item.image}
        alt={item.name}
        fill
        sizes="(max-width: 420px) 45vw, (max-width: 700px) 30vw, (max-width: 1024px) 23vw, 16vw"
        className="arrival-tile-image"
      />
    </button>
  );
}