"use client";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Swiper as SwiperJS } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import { useEffect, useState } from "react";

import 'swiper/css';
import 'swiper/css/bundle';
import 'swiper/css/autoplay';

import { Button } from "@/components/ui/button";
import { SwiperProps } from "@/types";
import { useTranslation } from "react-i18next";

const Swiper = ({ props, id, children, showButtons = true }: SwiperProps) => {
    const [swiperInstance, setSwiperInstance] = useState(null);
    const { i18n } = useTranslation();
    useEffect(() => {
        const timer = setTimeout(() => {
            if (swiperInstance) {
                swiperInstance.update();
            }
        }, 100);
        return () => clearTimeout(timer);
    }, [swiperInstance]);

    return (
        <div className="flex items-center justify-between !gap-4">
            {showButtons && (
                <Button
                    className={`h-8 w-10 border-2 border-secondary-tw rounded-md text-secondary-tw prev-${id} hidden sm:flex ltr:rotate-180`}
                    onClick={() => swiperInstance?.slidePrev()}
                >
                    <ChevronRight />
                </Button>
            )}

            <SwiperJS
                key={id}
                modules={[Navigation, Pagination, Autoplay]}
                onSwiper={setSwiperInstance}
                observer={true}
                observeParents={true}
                watchOverflow={true}
                allowTouchMove={true}
                touchStartPreventDefault={false}
                preventInteractionOnTransition={true}
                {...props}
                navigation={showButtons ? {
                    nextEl: `.next-${id}`,
                    prevEl: `.prev-${id}`,
                } : false}
                dir={i18n.language === "ar" ? "rtl" : "ltr"}
            >
                {children}
            </SwiperJS>

            {showButtons && (
                <Button
                    className={`h-8 w-10 border-2 border-secondary-tw rounded-md text-secondary-tw next-${id} hidden sm:flex ltr:rotate-180`}
                    onClick={() => swiperInstance?.slideNext()}
                >
                    <ChevronLeft />
                </Button>
            )}
        </div>
    );
};

export default Swiper;