project-afterlife/apps/web/src/components/game/ScreenshotGallery.tsx

"use client";

import Image from "next/image";
import { useState } from "react";
import type { StrapiMedia } from "@afterlife/shared";

interface ScreenshotGalleryProps {
  screenshots: StrapiMedia[];
}

export function ScreenshotGallery({ screenshots }: ScreenshotGalleryProps) {
  const [selected, setSelected] = useState(0);

  if (screenshots.length === 0) return null;

  return (
    <div className="mt-12">
      <div className="relative aspect-video rounded-lg overflow-hidden mb-4">
        <Image
          src={screenshots[selected].url}
          alt={screenshots[selected].alternativeText || "Screenshot"}
          fill
          className="object-cover"
        />
      </div>
      {screenshots.length > 1 && (
        <div className="flex gap-2 overflow-x-auto pb-2">
          {screenshots.map((ss, i) => (
            <button
              key={ss.id}
              onClick={() => setSelected(i)}
              className={`relative w-24 h-16 rounded overflow-hidden flex-shrink-0 border-2 transition-colors ${
                i === selected ? "border-[#d4a574]" : "border-transparent"
              }`}
            >
              <Image
                src={ss.url}
                alt={ss.alternativeText || `Screenshot ${i + 1}`}
                fill
                className="object-cover"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}