'use client'

import Image from 'next/image'
import { useState, useEffect } from 'react'

interface ImageCarouselProps {
  images: string[]
  className?: string
  autoPlay?: boolean
  interval?: number
}

export function ImageCarousel({
  images,
  className = '',
  autoPlay = true,
  interval = 3000,
}: ImageCarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isTransitioning, setIsTransitioning] = useState(false)

  useEffect(() => {
    if (!autoPlay || images.length <= 1) return

    const timer = setInterval(() => {
      setIsTransitioning(true)
      setTimeout(() => {
        setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1))
        setIsTransitioning(false)
      }, 250) // 渐隐时间的一半
    }, interval)

    return () => clearInterval(timer)
  }, [autoPlay, interval, images.length])

  if (images.length === 0) {
    return <div className={className}>No picture.</div>
  }

  return (
    <div className={`group relative ${className}`}>
      {/* 主图片容器 */}
      <div className="relative h-full w-full overflow-hidden">
        {images.map((image, index) => (
          <Image
            key={`${image}-${index}`}
            src={`/images${image}`}
            alt={`Slide image ${index + 1}`}
            fill
            className={`absolute inset-0 object-cover object-top transition-opacity duration-500 ${
              index === currentIndex && !isTransitioning ? 'opacity-100' : 'opacity-0'
            }`}
            priority={index === 0}
          />
        ))}
      </div>

      {/* 指示器圆点 */}
      {/* <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
        {images.map((_, index) => (
          <button
            key={index}
            onClick={() => goToSlide(index)}
            className={`w-2 h-2 rounded-full transition-all duration-300 ${
              index === currentIndex 
                ? 'bg-white scale-125' 
                : 'bg-white/50 hover:bg-white/80'
            }`}
            aria-label={`切换到第 ${index + 1} 张图片`}
          />
        ))}
      </div> */}
    </div>
  )
}
