import React, { forwardRef, useRef, useState } from "react";

import styles from "./carousel.module.scss";

import classNames from "classnames";

import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";
import { Swiper, SwiperSlide, SwiperProps } from "swiper/react";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

interface Props extends SwiperProps {
  items: any[];
  isAutoWidth?: boolean;
  children: any;
}

const Carousel = forwardRef(
  (
    {
      items,
      children,
      slidesPerView,
      pagination,
      spaceBetween,
      navigation,
      className,
      isAutoWidth,
      ...props
    }: Props,
    ref: any
  ) => {
    const swiperRef = useRef(null);
    const [swiper, setSwiper] = useState(null);

    const onSwiperInit = (swiper: any) => {
      setSwiper(swiper);
      if (ref) {
        ref.current = swiper;
      }
    };

    return (
      <Swiper
        slidesPerView={slidesPerView}
        modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
        pagination={pagination}
        spaceBetween={spaceBetween}
        navigation={navigation}
        className={classNames(styles.carousel, className)}
        ref={swiperRef} // Forward the ref to the Swiper component
        onSwiper={onSwiperInit}
        {...props}
      >
        {items?.map((item: any, index: any) => (
          <SwiperSlide
            style={{ width: isAutoWidth ? "auto" : undefined, height: "auto" }}
            key={index}
          >
            {({ isActive }) => children(item, index, { isActive })}
          </SwiperSlide>
        ))}
      </Swiper>
    );
  }
);

export default Carousel;