'use client'

import "swiper/css"
import "swiper/css/autoplay"
import "swiper/css/navigation"

import { FC, ReactNode } from 'react'
import { ISlider } from '@/lib/interfaces'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Navigation } from 'swiper/modules'
import Link from 'next/link'
import Image from 'next/image'

interface IProps {
    sliders?: ISlider[];
}

export const HomeSlider: FC<IProps> = ({ sliders }): ReactNode => {
    if(!sliders)
        return null

    return <Swiper
        modules={[Navigation, Autoplay]}
        slidesPerView={1}
        loop
        speed={600}
        autoplay={{
            delay: 5000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
        }}
        navigation={true}
        pagination={{
            clickable: true,
        }}
    >
        {sliders.map((slider, i) => <SwiperSlide key={i}>
            {slider.link ?
                <Link href={slider.link} target="_blank">
                    <Image
                        src={slider.image}
                        alt={`slider-${i+1}`}
                        width={1920}
                        height={400}
                        className="block w-full object-cover"
                    />
                </Link> :
                <Image
                    src={slider.image}
                    alt={`slider-${i+1}`}
                    width={1920}
                    height={400}
                    className="block w-full object-cover"
                />
            }
        </SwiperSlide>)}
    </Swiper>
}