import 'swiper/css/navigation';
import Button from '@/components/Button'
import Image from 'next/image'
import { FC } from 'react'
import { Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react'
import { useGetLanding } from './hooks/useHomeData';
import Link from 'next/link';

const HeroSection: FC = () => {

    const { data } = useGetLanding()

    return (
        <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
            {
                data?.data?.sliders?.map((item) => {
                    return (
                        <SwiperSlide key={item.id}>
                            <div className='relative'>
                                <Image
                                    src={item.imageUrl}
                                    alt='banner'
                                    width={1920}
                                    height={1080}
                                    className='w-full rounded-4xl object-cover xl:mt-14 mt-8 min-h-[210px] max-h-[500px]'
                                />

                                <div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl'>
                                    <div className='max-w-maxWidth w-full mx-auto px-10 xl:text-4xl text-lg text-white'>
                                        <p>{item.title}</p>
                                        <p className='xl:mt-5 font-bold'>{item.description}</p>

                                        <Link href={item.link}>
                                            <Button
                                                className='xl:mt-12 mt-5 !w-fit px-10 bg-white !text-black'
                                                label='بیشتر بدانید'
                                            />
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </SwiperSlide>
                    )
                })
            }
        </Swiper>
    )
}

export default HeroSection