"use client";

import Image from "next/image";
import Link from "next/link";
import * as Icon from "@phosphor-icons/react/dist/ssr";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import "swiper/css/bundle";



const SliderOne = () => {
    return (
        <div className="slider-block style-one">
            <div className="prev-arrow flex items-center justify-center">
                <Icon.CaretLeft className="text-white heading6" weight="bold" />
            </div>
            <div className="slider-main">
                <Swiper
                    spaceBetween={0}
                    slidesPerView={1}
                    navigation={{
                        prevEl: '.prev-arrow',
                        nextEl: '.next-arrow',
                    }}
                    loop={true}
                    pagination={{ clickable: true }}
                    speed={400}
                    modules={[Pagination, Autoplay, Navigation]}
                    className='lg:h-full h-[calc(100vh-80px)]'
                    autoplay={{
                        delay: 4000,
                    }}
                >
                    <SwiperSlide>
                        <div className="slider-item slider-first">
                            <div className="bg-img">
                                <Image
                                    src={'/images/slider/11.jpg'}
                                    width={4000}
                                    height={3000}
                                    alt="bgslider"
                                    priority={true}
                                    className="w-full h-full "
                                />
                            </div>

                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="slider-item slider-second">
                            <div className="bg-img">
                                <Image
                                    src={'/images/slider/12.jpg'}
                                    width={4000}
                                    height={3000}
                                    alt="bgslider"
                                    priority={true}
                                    className="w-full h-full "
                                />
                            </div>

                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="slider-item slider-third">
                            <div className="bg-img">
                                <Image
                                    src={'/images/slider/13.jpg'}
                                    width={4000}
                                    height={3000}
                                    alt="bgslider"
                                    priority={true}
                                    className="w-full h-full "
                                />
                            </div>

                        </div>
                    </SwiperSlide>

                </Swiper>
            </div>
            <div className="next-arrow flex items-center justify-center">
                <Icon.CaretRight className="text-white heading6" weight="bold" />
            </div>
        </div>
    );
};


export default SliderOne;