'use client'

import { useState } from 'react'

export default function ProductGallery({ images, name }: { images: string[]; name: string }) {
  const [active, setActive] = useState(0)

  if (images.length === 0) {
    return (
      <div className="aspect-square bg-sand rounded-xl flex items-center justify-center">
        <span className="font-display text-6xl text-brown/10">{name[0]}</span>
      </div>
    )
  }

  return (
    <div className="space-y-3">
      <div className="aspect-square bg-sand rounded-xl overflow-hidden">
        <img src={images[active]} alt={name} className="w-full h-full object-cover" />
      </div>
      {images.length > 1 && (
        <div className="flex gap-2 overflow-x-auto pb-1">
          {images.map((img, i) => (
            <button key={i} onClick={() => setActive(i)}
              className={`flex-none w-16 h-16 rounded-lg overflow-hidden border-2 transition-colors ${i === active ? 'border-earth' : 'border-transparent'}`}>
              <img src={img} alt="" className="w-full h-full object-cover" />
            </button>
          ))}
        </div>
      )}
    </div>
  )
}