import React, { useState } from 'react'
import { cn } from '../lib/utils'
import { X, ChevronLeft, ChevronRight } from 'lucide-react'

interface ImageViewerURIProps {
  images: string[]
  initialIndex?: number
  open: boolean
  onClose: () => void
}

export function ImageViewerURI({
  images,
  initialIndex = 0,
  open,
  onClose,
}: ImageViewerURIProps) {
  const [currentIndex, setCurrentIndex] = useState(initialIndex)

  if (!open || images.length === 0) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90">
      <button
        onClick={onClose}
        className="absolute right-4 top-4 z-10 text-white hover:text-gray-300"
      >
        <X className="h-8 w-8" />
      </button>

      <button
        onClick={() => setCurrentIndex((i) => Math.max(0, i - 1))}
        disabled={currentIndex === 0}
        className="absolute left-4 text-white disabled:opacity-30"
      >
        <ChevronLeft className="h-8 w-8" />
      </button>

      <img
        src={images[currentIndex]}
        alt="Viewer"
        className="max-h-[90vh] max-w-[90vw] object-contain"
      />

      <button
        onClick={() =>
          setCurrentIndex((i) => Math.min(images.length - 1, i + 1))
        }
        disabled={currentIndex === images.length - 1}
        className="absolute right-4 text-white disabled:opacity-30"
      >
        <ChevronRight className="h-8 w-8" />
      </button>

      <div className="absolute bottom-4 text-sm text-white">
        {currentIndex + 1} / {images.length}
      </div>
    </div>
  )
}
