'use client'
import { FC, useState, useEffect } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import Image from 'next/image';
import { useGetLanding } from '../hooks/useHomeData';

const Carousel: FC = () => {
    const { data } = useGetLanding()
    const [isMobile, setIsMobile] = useState(false)

    useEffect(() => {
        const checkIsMobile = () => {
            setIsMobile(window.innerWidth < 768) // md breakpoint
        }

        checkIsMobile()
        window.addEventListener('resize', checkIsMobile)

        return () => window.removeEventListener('resize', checkIsMobile)
    }, [])

    // Choose appropriate sliders based on device type
    const sliders = isMobile ? data?.results?.sliders?.mobile : data?.results?.sliders?.desktop

    if (!sliders || sliders.length === 0) {
        return null
    }

    return (
        <div className='relative' style={{ zIndex: 0 }}>
            <Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 0, position: 'relative' }}>
                {sliders.map((slider) => (
                    <SwiperSlide key={slider._id}>
                        <div className='h-[200px] sm:h-[300px] md:h-[400px] relative'>
                            <Image
                                src={slider.imageUrl}
                                alt={slider.altText}
                                fill
                                className="object-cover rounded-lg"
                            />
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    )
}

export default Carousel