'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';

export default function Slider() {
    return(
        <div className="home-banner-container mb-10 min-h-[845px]">
            <div className="banner-slider gap-4 grid grid-cols-3 w-[932px] m-[auto_0_auto_auto]">
                <div className="home-banner-left col-span-2 custom-dots relative group ">
                    <Swiper
                        spaceBetween={50}
                        slidesPerView={1}
                        loop={true}
                        autoplay={{ delay: 3000 }}
                        modules={[Navigation, Pagination, Autoplay]}
                        navigation={{
                            prevEl: ".custom-nav .swiper-button-prev",
                            nextEl: ".custom-nav .swiper-button-next",
                        }}
                        pagination={{ clickable: true }}
                    >
                        <SwiperSlide>
                            <a href="">
                                <img src="/images/homepage/home-slide.png" alt="" width={100} height={100} className="block w-full lazy"/>
                            </a>
                        </SwiperSlide>

                        <SwiperSlide>
                            <a href="">
                                <img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
                            </a>
                        </SwiperSlide>

                        <SwiperSlide>
                            <a href="">
                                <img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
                            </a>
                        </SwiperSlide>

                        <SwiperSlide>
                            <a href="">
                                <img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
                            </a>
                        </SwiperSlide>
                    </Swiper>

                    <div className="custom-nav hidden">
                        <div
                            className="button-icon swiper-button-prev"
                            role="button"
                            aria-label="Previous slide"
                        />
                        <div
                            className="button-icon swiper-button-next"
                            role="button"
                            aria-label="Next slide"
                        />
                    </div>
                </div>

                <div className="home-banner-right col-span-1">
                    <a href="" className="last:mb-0 mb-4">
                        <img src="images/homepage/right-1.png" alt="" width="" height="" className="block w-full lazy"/>
                    </a>

                    <a href="" className="last:mb-0 mb-4">
                        <img src="images/homepage/right-2.png" alt="" width="" height="" className="block w-full lazy"/>
                    </a>
                </div>

                <div className="home-banner-right grid grid-cols-3 gap-4 col-span-3">
                    <a href="">
                        <img src="images/homepage/under-slide-1.png" alt="" width="" height="" className="block w-full lazy"/>
                    </a>

                    <a href=""> <img src="images/homepage/under-slide-2.png" alt="" width="" height="" className="block w-full lazy"/> </a> <a href=""> <img src="images/homepage/under-slide-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
                </div>
            </div>

            <div className="grid grid-cols-4 gap-4 mt-4">
                <a href="">
                    <img src="images/homepage/under-1.png" alt="" width="" height="" className="block w-full lazy"/>
                </a>

                <a href=""> <img src="images/homepage/under-2.png" alt="" width="" height="" className="block w-full lazy"/> </a>
                <a href=""> <img src="images/homepage/under-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
                <a href=""> <img src="images/homepage/under-4.png" alt="" width="" height="" className="block w-full lazy"/> </a>
            </div>
        </div>
    )
}