"use client";

import * as React from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export function ProductGallery({
  gallery,
  name,
  categoryLabel,
}: {
  gallery: string[];
  name: string;
  categoryLabel: string;
}) {
  const [activeImage, setActiveImage] = React.useState(0);

  return (
    <div className="space-y-3">
      <div className="group relative aspect-square overflow-hidden rounded-2xl bg-cream shadow-lg">
        <Image
          src={gallery[activeImage]}
          alt={name}
          fill
          className="object-cover transition-all duration-700"
          sizes="(max-width: 1024px) 100vw, 50vw"
          priority
        />
        <div className="absolute left-4 top-4">
          <span className="rounded-full bg-white/90 px-3 py-1 text-[10px] font-bold tracking-widest text-gold backdrop-blur-sm">
            {categoryLabel}
          </span>
        </div>
        {gallery.length > 1 && (
          <>
            <button
              onClick={() => setActiveImage((p) => p === 0 ? gallery.length - 1 : p - 1)}
              className="absolute left-3 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-white/85 text-ink shadow transition-all hover:bg-gold hover:text-white"
            >
              <ChevronLeft className="h-4 w-4" />
            </button>
            <button
              onClick={() => setActiveImage((p) => p === gallery.length - 1 ? 0 : p + 1)}
              className="absolute right-3 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-white/85 text-ink shadow transition-all hover:bg-gold hover:text-white"
            >
              <ChevronRight className="h-4 w-4" />
            </button>
          </>
        )}
      </div>
      {gallery.length > 1 && (
        <div className="flex gap-2.5">
          {gallery.map((img, i) => (
            <button
              key={i}
              onClick={() => setActiveImage(i)}
              className={cn(
                "relative aspect-square w-20 flex-shrink-0 overflow-hidden rounded-xl border-2 transition-all duration-200",
                activeImage === i ? "border-gold shadow-md" : "border-transparent opacity-50 hover:opacity-90"
              )}
            >
              <Image src={img} alt={`${name} view ${i + 1}`} fill className="object-cover" sizes="80px" />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}