"use client"

import { useState } from "react"

type Photo = {
  url: string
  filename?: string
}

interface PhotoCarouselProps {
  photos: Photo[]
  altText: string
  height?: string | number
  borderRadius?: string
  objectFit?: "cover" | "contain"
}

export function PhotoCarousel({ 
  photos, 
  altText, 
  height = "200px", 
  borderRadius = "var(--radius-t-lg)",
  objectFit = "cover" 
}: PhotoCarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0)

  if (!photos || photos.length === 0) {
    return (
      <div style={{ width: "100%", height, background: "var(--surface-hover)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", borderRadius }}>
        Fără imagine
      </div>
    )
  }

  const handlePrev = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setCurrentIndex(prev => (prev === 0 ? photos.length - 1 : prev - 1))
  }

  const handleNext = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setCurrentIndex(prev => (prev === photos.length - 1 ? 0 : prev + 1))
  }

  return (
    <div style={{ position: "relative", width: "100%", height, borderRadius, overflow: "hidden" }}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img 
        src={photos[currentIndex].url} 
        alt={`${altText} - ${currentIndex + 1}`} 
        style={{ width: "100%", height: "100%", objectFit, display: "block" }}
      />
      
      {photos.length > 1 && (
        <>
          <button
            onClick={handlePrev}
            style={{
              position: "absolute",
              top: "50%",
              left: "8px",
              transform: "translateY(-50%)",
              background: "rgba(0,0,0,0.5)",
              color: "white",
              border: "none",
              borderRadius: "50%",
              width: "28px",
              height: "28px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              zIndex: 10
            }}
            aria-label="Imaginea anterioară"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
          </button>
          
          <button
            onClick={handleNext}
            style={{
              position: "absolute",
              top: "50%",
              right: "8px",
              transform: "translateY(-50%)",
              background: "rgba(0,0,0,0.5)",
              color: "white",
              border: "none",
              borderRadius: "50%",
              width: "28px",
              height: "28px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              zIndex: 10
            }}
            aria-label="Imaginea următoare"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
          </button>

          <div style={{
            position: "absolute",
            bottom: "8px",
            right: "8px",
            background: "rgba(0,0,0,0.6)",
            color: "white",
            fontSize: "0.7rem",
            padding: "2px 6px",
            borderRadius: "12px",
            fontWeight: 600,
            zIndex: 10
          }}>
            {currentIndex + 1} / {photos.length}
          </div>
        </>
      )}
    </div>
  )
}