import { SafeImage } from "@/components/ui/safe-image";
import { useState } from "react";

interface ImageCarouselProps {
  images: string[];
  name: string;
}

export default function ImageCarousel({ images, name }: ImageCarouselProps) {
  const [current, setCurrent] = useState(0);

  return (
    <div className="relative h-full w-full overflow-hidden rounded-lg bg-muted flex items-center">
      {/* Prev button, only if multiple images */}
      {images.length > 1 && (
        <button
          type="button"
          className="absolute left-2 z-10 bg-white/70 rounded-full p-1 shadow hover:bg-white"
          onClick={() => setCurrent((prev) => (prev === 0 ? images.length - 1 : prev - 1))}
          aria-label="Anterior"
        >
          ‹
        </button>
      )}
      <SafeImage
        src={images[current]}
        alt={name}
        className="h-full w-full object-cover"
        fallbackSrc="/placeholder.svg"
        loading="lazy"
      />
      {/* Next button, only if multiple images */}
      {images.length > 1 && (
        <button
          type="button"
          className="absolute right-2 z-10 bg-white/70 rounded-full p-1 shadow hover:bg-white"
          onClick={() => setCurrent((prev) => (prev === images.length - 1 ? 0 : prev + 1))}
          aria-label="Siguiente"
        >
          ›
        </button>
      )}
      {/* Indicators, always show */}
      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
        {images.map((_, idx) => (
          <span
            key={idx}
            className={`h-2 w-2 rounded-full ${idx === current ? 'bg-primary' : 'bg-muted-foreground/40'}`}
          />
        ))}
      </div>
    </div>
  );
}