"use client";

import Image from "next/image";
import {
  Button,
  Card,
  CardFooter,
  CircularProgress,
  ScrollShadow,
} from "@heroui/react";
import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import Link from "next/link";

import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
const datas = [
  { id: 1, src: "/props-1.png" },
  { id: 2, src: "/props-2.png" },
  { id: 2, src: "/props-3.png" },
];
export default function AddsCarousel() {
  return (
    <div className="w-[90%] lg:w-[75%] mx-auto">
      {datas ? (
        <Swiper
          centeredSlides={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          navigation={true}
          modules={[Autoplay, Controller, Navigation]}
          className="mySwiper"
          onSwiper={(swiper) => {
            swiper.navigation.nextEl?.classList.add(
              "bg-white/70",
              "!text-black",
              "rounded-full",
              "!w-[40px]",
              "!h-[40px]"
            );
            swiper.navigation.prevEl?.classList.add(
              "bg-white/70",
              "!text-black",
              "rounded-full",
              "!w-[40px]",
              "!h-[40px]"
            );
          }}
        >
          {datas?.map((newsItem: any, index: number) => (
            <SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
              <Card
                isFooterBlurred
                radius="lg"
                className="border-none h-[20vh] lg:h-[50vh] shadow-none"
              >
                <Image
                  alt="headernews"
                  width={1440}
                  height={1080}
                  src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
                  className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
                />
              </Card>
            </SwiperSlide>
          ))}
        </Swiper>
      ) : (
        <CircularProgress aria-label="Loading..." size="lg" />
      )}
    </div>
  );
}