import Image from "next/image";

export type GalleryPhoto = { src: string; alt?: string };

const spans = [
  "col-span-12 md:col-span-8 aspect-[16/9]",
  "col-span-6 md:col-span-4 aspect-square",
  "col-span-6 md:col-span-4 aspect-square",
  "col-span-12 md:col-span-4 aspect-[4/3]",
  "col-span-6 md:col-span-4 aspect-[4/3]",
  "col-span-6 md:col-span-4 aspect-[4/3]",
];

export function Gallery({ photos }: { photos: GalleryPhoto[] }) {
  const take = photos.slice(0, 6);
  return (
    <div className="grid grid-cols-12 gap-3 md:gap-4">
      {take.map((p, i) => (
        <div
          key={p.src}
          className={`relative overflow-hidden border-2 border-neutral-900 bg-neutral-200 ${
            spans[i] ?? "col-span-6 aspect-square"
          }`}
        >
          <Image
            src={p.src}
            alt={p.alt ?? "Impact etkinlik"}
            fill
            sizes="(min-width: 768px) 33vw, 100vw"
            className="object-cover transition duration-700 hover:scale-[1.03]"
          />
        </div>
      ))}
    </div>
  );
}
