import React from "react"
import Image from "./Image"
import { Swiper, SwiperSlide } from "swiper/react"
import { Navigation, Autoplay, EffectFade, EffectCoverflow } from "swiper"

// Import Swiper styles
import "swiper/css"
import "swiper/css/navigation"
import "swiper/css/effect-fade"
import "swiper/css/effect-coverflow"
import { twMerge } from "tailwind-merge"

interface DataImage {
    src: string
}

interface Props {
    height?: string
    images: Array<DataImage>
    delay?: number
    animation?: "slide" | "fade" | "coverflow"
    isLogo?: boolean
    slidesPerView?: number
    options?: any
}

const Carousel = (props: Props) => {
    const {
        height,
        images,
        delay,
        animation = "slide",
        isLogo = false,
        slidesPerView = 5,
    } = props

    const options = props.options ?? {}
    const oClass = options.class || {}

    return (
        <div
            className={twMerge(
                `flex items-center ${height} ${
                    isLogo ? "" : "h-auto min-w-full"
                }  overflow-hidden`,
                oClass.body
            )}
        >
            <Swiper
                slidesPerView={isLogo ? slidesPerView : "auto"}
                spaceBetween={isLogo ? 1 : 0}
                autoplay={{
                    delay: delay,
                    disableOnInteraction: false,
                }}
                loop={true}
                speed={
                    animation == "slide" || animation == "coverflow"
                        ? 1500
                        : 3000
                }
                effect={animation}
                // navigation
                modules={[Autoplay, Navigation, EffectFade, EffectCoverflow]}
            >
                {images.length > 1 ? (
                    images.map((item: any, key: any) => {
                        return (
                            <SwiperSlide
                                key={key}
                                className={twMerge(oClass.swiperSlide)}
                            >
                                <div
                                    className={twMerge(
                                        `w-full  ${
                                            isLogo
                                                ? "flex h-36 w-36 items-center justify-center rounded-lg bg-white p-2"
                                                : ""
                                        }`,
                                        oClass.SwiperSlide
                                    )}
                                >
                                    <Image
                                        image={item.src}
                                        className={twMerge(
                                            `w-full  ${isLogo ? "" : ""}`,
                                            oClass.image
                                        )}
                                        objectFit="fill"
                                    />
                                </div>
                            </SwiperSlide>
                        )
                    })
                ) : (
                    <SwiperSlide className={twMerge(oClass.swiperSlide)}>
                        <div
                            className={twMerge(
                                `w-full  ${
                                    isLogo
                                        ? "flex h-36 w-36 items-center justify-center rounded-lg bg-white p-2"
                                        : ""
                                }`,
                                oClass.SwiperSlide
                            )}
                        >
                            <Image
                                image={images.src}
                                className={twMerge(
                                    `w-full  ${isLogo ? "" : ""}`,
                                    oClass.image
                                )}
                                objectFit="fill"
                            />
                        </div>
                    </SwiperSlide>
                )}
            </Swiper>
        </div>
    )
}

export default Carousel