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"

interface DataImage {
    src: string
}

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

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

    return (
        <div className={`flex items-center ${height} overflow-hidden`}>
            <Swiper
                slidesPerView={isLogo ? 5 : "auto"}
                spaceBetween={isLogo ? 3 : 0}
                autoplay={{
                    delay: delay,
                    disableOnInteraction: false,
                }}
                loop={true}
                speed={
                    animation == "slide" || animation == "coverflow"
                        ? 1500
                        : 3000
                }
                effect={animation}
                navigation
                modules={[Autoplay, Navigation, EffectFade, EffectCoverflow]}
            >
                {images.map((item: any, key: any) => {
                    return (
                        <SwiperSlide key={key}>
                            <Image
                                image={item.src}
                                className={`w-full ${
                                    isLogo ? "h-28 w-28" : ""
                                }`}
                            />
                        </SwiperSlide>
                    )
                })}
            </Swiper>
        </div>
    )
}

export default Carousel