'use client';

import Image from 'next/image';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/cn';
import { useState } from 'react';

interface Props {
  images: string[];
}

export const SliderGallery = ({ images }: Props) => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const current = images[selectedIndex];
  const previous = selectedIndex > 0 ? images[selectedIndex - 1] : null;
  const next = selectedIndex < images.length - 1 ? images[selectedIndex + 1] : null;

  const goPrev = () => {
    if (selectedIndex === 0) return;
    setSelectedIndex((prev) => prev - 1);
  };

  const goNext = () => {
    if (selectedIndex === images.length - 1) return;
    setSelectedIndex((prev) => prev + 1);
  };

  return (
    <section className="relative mx-auto flex w-full flex-col items-center">
      {/* Flechas */}
      <button
        type="button"
        onClick={goPrev}
        disabled={selectedIndex === 0}
        className={cn(
          'absolute top-1/2 left-0 z-30 -translate-y-1/2 transition-opacity',
          selectedIndex === 0 ? 'pointer-events-none opacity-30' : 'cursor-pointer opacity-100',
        )}
      >
        <ChevronLeft className="h-8 w-8 text-neutral-500" />
      </button>

      <button
        type="button"
        onClick={goNext}
        disabled={selectedIndex === images.length - 1}
        className={cn(
          'absolute top-1/2 right-0 z-30 -translate-y-1/2 transition-opacity',
          selectedIndex === images.length - 1
            ? 'pointer-events-none opacity-30'
            : 'cursor-pointer opacity-100',
        )}
      >
        <ChevronRight className="h-8 w-8 text-neutral-500" />
      </button>

      {/* Galería */}
      <div className="relative h-125 w-full overflow-hidden">
        {/* Imagen izquierda */}
        {previous && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 0.5 }}
            exit={{ opacity: 0 }}
            className="absolute top-1/2 left-[5%] z-10 h-55 w-70 -translate-y-1/2 overflow-hidden blur-[3px]"
          >
            <Image src={previous} alt="" fill className="object-cover" />
          </motion.div>
        )}

        {/* Imagen principal */}
        <AnimatePresence mode="wait">
          <motion.div
            key={current}
            initial={{
              opacity: 0,
              scale: 0.96,
            }}
            animate={{
              opacity: 1,
              scale: 1,
            }}
            exit={{
              opacity: 0,
              scale: 0.96,
            }}
            transition={{
              duration: 0.3,
            }}
            className="absolute top-1/2 left-1/2 z-20 h-105 w-[70%] max-w-225 -translate-x-1/2 -translate-y-1/2 overflow-hidden"
          >
            <Image src={current} alt="" fill priority className="object-cover" />
          </motion.div>
        </AnimatePresence>

        {/* Imagen derecha */}
        {next && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 0.5 }}
            exit={{ opacity: 0 }}
            className="absolute top-1/2 right-[5%] z-10 h-55 w-70 -translate-y-1/2 overflow-hidden blur-[3px]"
          >
            <Image src={next} alt="" fill className="object-cover" />
          </motion.div>
        )}
      </div>

      {/* Indicadores */}
      {images.length > 1 && (
        <div className="mt-8 flex gap-2">
          {images.map((_, index) => (
            <button
              key={index}
              type="button"
              onClick={() => setSelectedIndex(index)}
              className={cn(
                'h-px w-8 transition-all duration-300',
                index === selectedIndex ? 'bg-neutral-900' : 'bg-neutral-400',
              )}
            />
          ))}
        </div>
      )}
    </section>
  );
};