"use client";
import { Card, CardFooter } from "@nextui-org/react";
import Image from "next/image";
import { useEffect, useState } from "react";
import { ChevronLeftWhite, ChevronRightIcon, EyeIcon } from "../icons";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { convertDateFormat, textEllipsis } from "@/utils/global";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
import "swiper/css/navigation";

export default function ENewsPolri() {
  const [article, setArticle] = useState<any>([]);

  useEffect(() => {
    async function getArticle() {
      const req = { page: 1, search: "", limit: "10" };

      const response = await getListArticle(req);
      console.log("res", response?.data?.data);
      setArticle(response?.data?.data);
    }
    getArticle();
  }, []);

  return (
    <div className="bg-[#f0f0f0] dark:bg-[#1F1A17] text-center md:rounded-lg h-auto  flex py-4 flex-col justify-between items-center rounded-md">
      <p className="text-black dark:text-white border-b-3 border-red-500 py-2 mb-3 text-xl">
        E-Majalah Polri
      </p>

      <div className="w-[90vw] lg:w-[90%]">
        <div>
          <Swiper
            centeredSlides={false}
            spaceBetween={10}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            navigation={true}
            modules={[Autoplay, Navigation]}
            className="mySwiper"
            slidesPerView={1}
            breakpoints={{
              // When the window width is less than 640px
              720: {
                slidesPerView: 3, // Set slidesPerView to 1 on mobile
              },
            }}
          >
            {article?.map((newsItem: any) => (
              <SwiperSlide key={newsItem.id}>
                <Card isFooterBlurred radius="lg" className="border-none">
                  <img
                    alt="headernews"
                    src="/headernews.png"
                    className="h-[25vh] object-cover rounded-none"
                  />
                  <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
                    <div className="text-white">
                      <Link href={`news/detail/${newsItem.id}`}>
                        <p className="text-left font-semibold text-sm">
                          {textEllipsis(newsItem.title, 40)}
                        </p>
                      </Link>
                      <p className="py-[2px] text-left text-sm">
                        {convertDateFormat(newsItem.createdAt)} WIB
                      </p>
                      <p className="flex items-center gap-1 text-sm">
                        <EyeIcon className="text-white" />
                        {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                      </p>
                    </div>
                  </CardFooter>
                </Card>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
      <Link
        className="flex items-center gap-2 text-[#DD8306] mt-3"
        href="/e-majalah-polri/daftar-majalah"
      >
        Lihat Semua <ChevronRightIcon color="[#DD8306]" />
      </Link>
    </div>
  );
}