
import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface CoverSliderProps {
  images?: string[];
}

const CoverSlider: React.FC<CoverSliderProps> = ({ images = [] }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    if (images.length <= 1) return;
    const interval = setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % images.length);
    }, 6000);
    return () => clearInterval(interval);
  }, [images.length]);

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

  const nextSlide = () => setActiveIndex((prev) => (prev + 1) % images.length);
  const prevSlide = () => setActiveIndex((prev) => (prev - 1 + images.length) % images.length);

  return (
    <div className="w-full relative group px-4 md:px-10 mb-2 mt-4 animate-fade-in-up">
      <div className="container mx-auto">
        {/* High-end Banner Container with clean lines and premium shadow */}
        <div className="relative h-[180px] sm:h-[300px] md:h-[520px] w-full rounded-[32px] md:rounded-[60px] overflow-hidden shadow-[0_30px_70px_rgba(0,0,0,0.12)] bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700">
          <div 
            className="flex h-full transition-transform duration-1000 cubic-bezier(0.4, 0, 0.2, 1)"
            style={{ transform: `translateX(-${activeIndex * 100}%)` }}
          >
            {images.map((img, idx) => (
              <div key={idx} className="min-w-full h-full relative overflow-hidden flex items-center justify-center">
                <img src={img} className="w-full h-full object-cover" alt={`Featured Collection ${idx + 1}`} />
                {/* Visual subtle touch: light gradient and soft noise overlay */}
                <div className="absolute inset-0 bg-gradient-to-tr from-black/5 via-transparent to-black/5 pointer-events-none" />
              </div>
            ))}
          </div>

          {/* Premium Minimalist Controls */}
          {images.length > 1 && (
            <>
              <button 
                onClick={prevSlide}
                className="absolute left-6 md:left-12 top-1/2 -translate-y-1/2 p-3 md:p-5 bg-white/40 hover:bg-white/90 backdrop-blur-xl rounded-full text-black opacity-0 group-hover:opacity-100 transition-all duration-500 z-10 shadow-xl border border-white/50"
              >
                <ChevronLeft size={32} />
              </button>
              <button 
                onClick={nextSlide}
                className="absolute right-6 md:right-12 top-1/2 -translate-y-1/2 p-3 md:p-5 bg-white/40 hover:bg-white/90 backdrop-blur-xl rounded-full text-black opacity-0 group-hover:opacity-100 transition-all duration-500 z-10 shadow-xl border border-white/50"
              >
                <ChevronRight size={32} />
              </button>

              {/* Progress Indicators - Modern Dash Style */}
              <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex gap-4 z-10">
                {images.map((_, i) => (
                  <button 
                    key={i} 
                    onClick={() => setActiveIndex(i)}
                    className={`h-1.5 transition-all duration-700 rounded-full ${i === activeIndex ? 'w-14 bg-white shadow-lg' : 'w-4 bg-white/30 hover:bg-white/60'}`}
                  />
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default CoverSlider;
