import React, { useState } from 'react'
import { cn } from '../lib/utils'

interface ImageCarouselProps {
  images: { uri?: string }[]
  className?: string
}

export function ImageCarousel({ images, className }: ImageCarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0)

  if (images.length === 0) return null

  return (
    <div className={cn('relative w-full', className)}>
      <div className="flex overflow-x-auto scroll-smooth snap-x snap-mandatory">
        {images.map((image, index) => (
          <div
            key={index}
            className="min-w-full snap-center"
          >
            <img
              src={image.uri}
              alt={`Slide ${index + 1}`}
              className="h-48 w-full object-cover"
            />
          </div>
        ))}
      </div>
      <div className="absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-1.5">
        {images.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentIndex(index)}
            className={cn(
              'h-2 w-2 rounded-full transition-colors',
              index === currentIndex ? 'bg-white' : 'bg-white/50'
            )}
          />
        ))}
      </div>
    </div>
  )
}
