"use client";
import { Card, CardBody, CardFooter, Image } from "@heroui/react";
import React, { useEffect, useState } from "react";
import { EyeIcon, UnderLine } from "../icons";
import { getListArticle } from "@/services/article";
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";
import Link from "next/link";
import { convertDateFormat, textEllipsis } from "@/utils/global";

export default function RelatedNews(props: { categories: any }) {
  const { categories } = props;
  const [article, setArticle] = useState<any>([]);

  useEffect(() => {
    async function getArticle() {
      console.log("categories", categories);
      const idString = categories.map((item: any) => item.id).join(",");

      const req = {
        page: 1,
        search: "",
        limit: "10",
        isPublish: true,
        categoryIds: idString,
      };
      const response = await getListArticle(req);
      setArticle(response?.data?.data);
    }
    getArticle();
  }, []);
  return (
    <div className="flex flex-col items-center">
      <div className="text-2xl font-bold flex flex-col items-center mb-3">
        <div className="border-b-3 border-red-600 text-lg font-semibold">
          Berita Terkait
        </div>
      </div>
      <div className="w-[90vw] lg:w-full">
        <div>
          <Swiper
            centeredSlides={false}
            spaceBetween={10}
            navigation={true}
            modules={[Autoplay, Navigation]}
            className="mySwiper"
            slidesPerView={1}
            breakpoints={{
              // When the window width is less than 640px
              720: {
                slidesPerView: 4, // Set slidesPerView to 1 on mobile
              },
            }}
            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]"
              );
            }}
          >
            {article?.map((newsItem: any, index: number) => (
              <SwiperSlide key={`${newsItem.id}-${index}`}>
                <Card isFooterBlurred radius="lg" className="border-none">
                  <Image
                    width={480}
                    height={480}
                    alt="headernews"
                    src={
                      newsItem?.thumbnailUrl == ""
                        ? "/no-image.jpg"
                        : newsItem?.thumbnailUrl
                    }
                    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-black dark:text-white lg:text-white">
                      <Link
                        href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
                      >
                        <p className="text-left font-bold text-sm">
                          {textEllipsis(newsItem.title, 33)}
                        </p>
                      </Link>
                      <p className="py-[2px] text-left text-xs">
                        {convertDateFormat(newsItem.createdAt)} WIB
                      </p>
                    </div>
                  </CardFooter>
                </Card>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </div>
  );
}