import { useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

function ImageSlider({ images, altPrefix = "Image" }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  if (!images || images.length === 0) {
    return null;
  }

  const goToPrevious = () => {
    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
  };

  const goToNext = () => {
    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
  };

  return (
    <div className="space-y-4">
      <div className="relative overflow-hidden rounded-2xl border-0 bg-[color:var(--card)] shadow-lg transition-all duration-500 hover:shadow-2xl">
        <div className="pointer-events-none absolute -left-8 top-0 h-full w-24 bg-[linear-gradient(90deg,var(--hearex-light-bg),transparent)]" />
        <div className="pointer-events-none absolute -right-8 top-0 h-full w-24 bg-[linear-gradient(270deg,var(--hearex-light-bg),transparent)]" />
        <div
          className="flex transition-transform duration-500 ease-in-out"
          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
        >
          {images.map((image, index) => (
            <img
              key={image + index}
              src={image}
              alt={`${altPrefix} ${index + 1}`}
              className="h-56 w-full shrink-0  sm:h-72 md:h-96"
            />
          ))}
        </div>

        <button
          type="button"
          onClick={goToPrevious}
          aria-label="Previous image"
          className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full bg-[color:var(--hearex-green)] p-2.5 text-white shadow-md hover:brightness-95"
        >
          <ChevronLeft size={20} />
        </button>
        <button
          type="button"
          onClick={goToNext}
          aria-label="Next image"
          className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-[color:var(--hearex-green)] p-2.5 text-white shadow-md hover:brightness-95"
        >
          <ChevronRight size={20} />
        </button>
      </div>

      <div className="flex items-center justify-center gap-2">
        {images.map((image, index) => (
          <button
            key={`dot-${image}-${index}`}
            type="button"
            onClick={() => setCurrentIndex(index)}
            aria-label={`Go to image ${index + 1}`}
            className={`h-2.5 w-2.5 rounded-full transition ${
              currentIndex === index
                ? "bg-[color:var(--hearex-green)]"
                : "bg-[color:var(--accent)] hover:bg-[color:var(--switch-background)]"
            }`}
          />
        ))}
      </div>
    </div>
  );
}

export default ImageSlider;
