"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Thumbs } from "swiper/modules";
import { useState } from "react";
import type { Swiper as SwiperType } from "swiper";
import ImageLightbox from "../ui/ImageLightbox";

import "swiper/css";
import "swiper/css/thumbs";

interface SliderProps {
  images?: string[];
}

const defaultImages = [
  "https://yefranchisees.b-cdn.net/frontend/About/img-01.jpg.jpeg",
  "https://yefranchisees.b-cdn.net/frontend/About/img-02.jpg.jpeg",
  "https://yefranchisees.b-cdn.net/frontend/About/img-03.jpg.jpeg",
  "https://yefranchisees.b-cdn.net/frontend/About/img-04.jpg.jpeg",
];

export default function Slider({ images = defaultImages }: SliderProps) {
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  return (
    <div className="flex flex-col md:flex-row gap-4 max-w-5xl mx-auto lg:mt-[50px] mt-[10px] about-slider">

      {/* MAIN IMAGE SLIDER */}
      <Swiper
       modules={[Thumbs]}
       thumbs={{
        swiper:
        thumbsSwiper && !thumbsSwiper.destroyed
        ? thumbsSwiper
        : null,
      }}
      className="
          w-full
          h-[210px] sm:h-[320px] md:h-[300px] lg:h-[540px] xl:h-[490px]
          rounded-3xl overflow-hidden
        "
      >
        {images.map((img, i) => (
          <SwiperSlide key={i}>
            <img
              src={img}
              className="w-full h-full object-cover cursor-pointer"
              onClick={() => setLightboxIndex(i)}
            />
          </SwiperSlide>
        ))}
      </Swiper>

      {/* THUMBNAILS */}
      <Swiper
        onSwiper={setThumbsSwiper}
        slidesPerView={4}
        spaceBetween={10}
        direction="horizontal"
        watchSlidesProgress
        breakpoints={{
          768: {
            direction: "vertical", // ONLY desktop
          },
        }}
        className="
          w-full md:w-[130px]
          h-[70px] md:h-[300px] lg:h-[550px] xl:h-[490px]
        "
      >
        {images.map((img, i) => (
          <SwiperSlide key={i}>
            <img
              src={img}
              alt={`Thumbnail ${i + 1}`}
              className="rounded-xl cursor-pointer object-cover
                w-full md:w-[130px]
                h-[60px] md:h-[70px] lg:h-[115px]"
            />
          </SwiperSlide>
        ))}
      </Swiper>

      <ImageLightbox
        images={images}
        index={lightboxIndex}
        onClose={() => setLightboxIndex(null)}
      />
    </div>
  );
}