import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay } from 'swiper/modules';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import 'swiper/css';
import 'swiper/css/navigation';

const images = [
    
    "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
    "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
     "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
    "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
     "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
    "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
     "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
    "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
     "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
    "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e", 
  ];
const UserDashboardHome = () => {
  return (
    <>
    <div className=" flex items-center justify-center p-4">
      <div className="w-full max-w-7xl relative">
        {/* Left Arrow */}
        <button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
          <ChevronLeft className="w-6 h-6 text-white" />
        </button>

        {/* Right Arrow */}
        <button className="swiper-button-next-custom absolute right-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
          <ChevronRight className="w-6 h-6 text-white" />
        </button>

        <Swiper
          modules={[Navigation, Autoplay]}
          navigation={{
            prevEl: '.swiper-button-prev-custom',
            nextEl: '.swiper-button-next-custom',
          }}
          grabCursor={true}
          centeredSlides={true}
          slidesPerView="auto"
          spaceBetween={10}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          loop={true}
          className="mySwiper"
        >
          {images.map((img, idx) => (
            <SwiperSlide key={idx}>
              <div className="relative overflow-hidden rounded-3xl w-[100%] ">
                <img
                  src={img}
                  alt={`Slide ${idx + 1}`}
                  className="w-full h-full object-cover"
                />
                {/* <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
                  <span className="text-white font-semibold text-lg">Slide {idx + 1}</span>
                </div> */}
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>

      <style>{`
        .swiper {
          width: 100%;
        //   padding: 60px 80px;
          overflow: visible;
        }

        .swiper-slide {
          width: 320px;
          height: 320px;
          transition: all 0.4s ease;
          opacity: 0.4;
          transform: scale(0.85);
        }

        .swiper-slide-active {
          width: 630px !important;
          height: 320px !important;
          opacity: 1;
          transform: scale(1);
          z-index: 2;
        }

        .swiper-slide > div {
          width: 100%;
          height: 100%;
        }

        .swiper-button-prev-custom,
        .swiper-button-next-custom {
          cursor: pointer;
        }

        @media (max-width: 1024px) {
          .swiper {
            padding: 50px 60px;
          }

          .swiper-slide {
            width: 240px;
            height: 340px;
          }

          .swiper-slide-active {
            width: 380px !important;
            height: 480px !important;
          }
        }

        @media (max-width: 768px) {
          .swiper {
            padding: 40px 50px;
          }

          .swiper-slide {
            width: 180px;
            height: 280px;
          }

          .swiper-slide-active {
            width: 300px !important;
            height: 400px !important;
          }

          .swiper-button-prev-custom,
          .swiper-button-next-custom {
            width: 40px;
            height: 40px;
          }
        }

        @media (max-width: 480px) {
          .swiper {
            padding: 30px 40px;
          }

          .swiper-slide {
            width: 140px;
            height: 220px;
          }

          .swiper-slide-active {
            width: 240px !important;
            height: 340px !important;
          }

          .swiper-button-prev-custom,
          .swiper-button-next-custom {
            width: 36px;
            height: 36px;
          }
        }
      `}</style>
    </div>

    </>
  )
}

export default UserDashboardHome
