"use client"

import type React from "react"

import { useState } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight } from "lucide-react"

interface CarouselThumbnailProps {
  images: string[]
  title: string
  description: string
  category?: string
  onImageClick?: (images: string[], index: number) => void
}

export default function CarouselThumbnail({
  images,
  title,
  description,
  category,
  onImageClick,
}: CarouselThumbnailProps) {
  const [currentIndex, setCurrentIndex] = useState(0)

  const nextImage = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setCurrentIndex((prev) => (prev + 1) % images.length)
  }

  const prevImage = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)
  }

  const handleImageClick = (e: React.MouseEvent) => {
    if (onImageClick) {
      e.preventDefault()
      e.stopPropagation()
      onImageClick(images, currentIndex)
    }
  }

  return (
    <div className="relative h-48 w-full group">
      <Image
        src={images[currentIndex] || "/placeholder.svg"}
        alt={title}
        fill
        className="object-cover transition-transform duration-300 group-hover:scale-110 cursor-pointer"
        onClick={handleImageClick}
      />

      {images.length > 1 && (
        <>
          <button
            onClick={prevImage}
            className="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-purple-900/70 text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10"
            aria-label="Previous image"
          >
            <ChevronLeft className="w-5 h-5" />
          </button>
          <button
            onClick={nextImage}
            className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-purple-900/70 text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10"
            aria-label="Next image"
          >
            <ChevronRight className="w-5 h-5" />
          </button>
        </>
      )}

      {category && (
        <div className="absolute top-3 right-3 px-3 py-1 rounded-full bg-purple-600/80 text-white text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity z-10">
          {category}
        </div>
      )}
    </div>
  )
}