import Image from 'next/image';

export function GameGallery({
  name,
  screenshots,
  videoIds,
}: {
  name: string;
  screenshots: string[];
  videoIds: string[];
}) {
  if (screenshots.length === 0 && videoIds.length === 0) return null;

  return (
    <section aria-labelledby="gallery-heading">
      <h2 id="gallery-heading" className="stat-label mb-3 !text-signal">
        Gallery
      </h2>
      <div className="flex gap-3 overflow-x-auto pb-2">
        {videoIds.slice(0, 1).map((id) => (
          <div key={id} className="aspect-video w-[320px] shrink-0 overflow-hidden clip-notch-sm sm:w-[420px]">
            <iframe
              src={`https://www.youtube-nocookie.com/embed/${id}`}
              title={`${name} trailer`}
              className="h-full w-full"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          </div>
        ))}
        {screenshots.slice(0, 8).map((src, i) => (
          <div key={src} className="relative aspect-video w-[280px] shrink-0 overflow-hidden clip-notch-sm">
            <Image
              src={src}
              alt={`${name} screenshot ${i + 1}`}
              fill
              sizes="280px"
              className="object-cover"
              loading="lazy"
            />
          </div>
        ))}
      </div>
    </section>
  );
}
