"use client";

import { useState } from "react";
import Image from "next/image";
import WishlistButton from "@/components/WishlistButton";
import type { WishlistItem } from "@/lib/wishlist-context";

export default function ProductGallery({
  images,
  alt,
  wishlistItem,
}: {
  images: string[];
  alt: string;
  wishlistItem: WishlistItem;
}) {
  const [selected, setSelected] = useState(0);

  return (
    <div className="space-y-3">
      <div className="relative aspect-square overflow-hidden rounded-xl bg-rose-50">
        <Image
          key={images[selected]}
          src={images[selected]}
          alt={alt}
          fill
          className="object-cover"
          sizes="(min-width: 768px) 45vw, 100vw"
          priority={selected === 0}
        />
        <WishlistButton item={wishlistItem} className="absolute right-3 top-3" />
      </div>
      {images.length > 1 && (
        <div className="grid grid-cols-4 gap-2 sm:grid-cols-5">
          {images.map((img, i) => (
            <button
              key={img + i}
              onClick={() => setSelected(i)}
              aria-label={`View image ${i + 1}`}
              aria-current={selected === i}
              className={`relative aspect-square overflow-hidden rounded-lg bg-rose-50 ring-2 transition ${
                selected === i ? "ring-rose-700" : "ring-transparent hover:ring-rose-200"
              }`}
            >
              <Image src={img} alt={`${alt} ${i + 1}`} fill className="object-cover" sizes="120px" />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}