import Image from "next/image";

export function PhotoStrip({ photos }: { photos: { src: string; alt?: string }[] }) {
  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4">
      {photos.slice(0, 4).map((p) => (
        <div
          key={p.src}
          className="relative aspect-[4/5] overflow-hidden border-2 border-neutral-900 bg-neutral-200"
        >
          <Image
            src={p.src}
            alt={p.alt ?? "Impact etkinlik"}
            fill
            sizes="(min-width: 768px) 22vw, 50vw"
            className="object-cover"
          />
        </div>
      ))}
    </div>
  );
}
