"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const Hero = ({ banner }) => {
    return (
        <div className="">
            <Swiper
                modules={[Navigation, Pagination, Autoplay]}
                spaceBetween={0}
                slidesPerView={1}
                speed={1600}
                loop={true}
                autoplay={{ delay: 3000, disableOnInteraction: false, }}
                pagination={{ clickable: true }}
            >
                {
                    banner?.map((value, index) => (
                        <SwiperSlide key={index}>
                            <img className="w-full" src={value.img} alt={value.name} title={value.name} />
                        </SwiperSlide>
                    ))
                }
            </Swiper>

        </div>
    );
}

export default Hero