'use client';

import { useMemo } from 'react';
import SwiperElement from '@/components/shared/SwiperElement';
import type { SwiperElementProps } from '@/components/shared/SwiperElement';
import Slide, { ISlideProps } from './Slide';
import type { Swiper as SwiperType } from 'swiper';
import cn from '@/lib/merge-clsx';
import './styles.css';


const ImageCarousel: React.FC<IImageCarousel> = ({ slides }) => {
  const swiperOptions = useMemo(() => {
    return {
      slidesPerView: 'auto',
      autoHeight: false,
      centeredSlides: true,
      slideToClickedSlide: true,
      grabCursor: true,
      initialSlide: 0,
      loop: false,
      speed: 800,
      scrollbar: {
        el: '#scrollbar',
        draggable: true,
        hide: false,
        dragSize: 200
      },
      on: {
        afterInit: (swiper: SwiperType) => {
          swiper.slideNext();
        }
      },
      effect: 'creative',
      creativeEffect: {
        limitProgress: 3,
        progressMultiplier: 3
      },
      breakpoints: {
        320: {
          creativeEffect: {
            next: {
              translate: ['35%', 0, 0],
              opacity: 1
            },
            prev: {
              translate: ['-35%', 0, 0],
              opacity: 1
            }
          }
        },
        648: {
          creativeEffect: {
            next: {
              translate: ['29.5%', 0, 0],
              scale: 0.9,
              opacity: 1
            },
            prev: {
              translate: ['-29.5%', 0, 0],
              scale: 0.9,
              opacity: 1
            }
          }
        }
      }
    } as SwiperElementProps['options'];
  }, []);

  const swiperClass = cn(['max-lg:[&>.swiper]:!overflow-visible']);

  return (
    <section className="dark bg-default-50 pt-24 pb-12 px-10 lg:pb-16 Carousel overflow-hidden ">
      <div className="max-w-[1920px] mx-auto">
        <SwiperElement options={swiperOptions} className={swiperClass}>
          {slides.map((slide, index) => (
            <SwiperElement.Slide
              key={index}
              className="origin-bottom lg:max-w-screen-lg">
              <Slide {...slide} />
            </SwiperElement.Slide>
          ))}
        </SwiperElement>
      </div>
    </section>
  );
};

export default ImageCarousel;
