"use client";

import Image from "next/image";
import { useState } from "react";
import { cn } from "@/lib/utils";

export function ProductGallery({ images, name }: { images: string[]; name: string }) {
  const list = images.length ? images : [];
  const [active, setActive] = useState(0);
  const current = list[active];

  return (
    <div>
      <div className="relative aspect-square overflow-hidden rounded-[1.5rem] border border-border bg-surface">
        {current ? (
          <Image
            src={current}
            alt={name}
            fill
            priority
            className="object-cover"
            sizes="(max-width:1024px) 100vw, 50vw"
          />
        ) : (
          <div className="flex h-full items-center justify-center bg-gradient-to-br from-surface-2 to-bg">
            <span className="font-[family-name:var(--font-space)] text-5xl font-bold text-accent/40">305</span>
          </div>
        )}
      </div>

      {list.length > 1 ? (
        <div className="mt-3 grid grid-cols-4 gap-3">
          {list.map((src, i) => (
            <button
              key={`${src}-${i}`}
              type="button"
              onClick={() => setActive(i)}
              className={cn(
                "relative aspect-square overflow-hidden rounded-xl border transition",
                i === active ? "border-accent" : "border-border hover:border-white/20",
              )}
            >
              <Image src={src} alt={`${name} ${i + 1}`} fill className="object-cover" sizes="120px" />
            </button>
          ))}
        </div>
      ) : null}
    </div>
  );
}