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

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

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

      const response = await getListArticle(req);
      setArticle(response?.data?.data);
    }
    getArticle();
  }, []);
  return (
    <div className="mt-2 space-y-5">
      <div className="font-semibold flex flex-col items-center space-y-5">
        <div className="flex  flex-col items-center">
          <div>
            Humas <b>MABES POLRI</b>
          </div>
          <div>
            <UnderLine />
          </div>
        </div>
        <div className="w-full lg:w-[300px] h-[400px] lg:p-4">
          <Swiper
            direction={"vertical"}
            centeredSlides={false}
            spaceBetween={10}
            mousewheel={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            pagination={{
              clickable: true,
            }}
            modules={[Autoplay, Pagination, Mousewheel]}
            className="mySwiper"
            slidesPerView={2}
          >
            {article?.map((newsItem: any) => (
              <SwiperSlide key={newsItem.id}>
                <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5">
                  <img
                    alt="headernews"
                    src="/headernews.png"
                    className="object-cover !h-[70%]"
                  />
                  <div className="text-black dark:text-white flex flex-col">
                    <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
                      <p className="text-left font-semibold text-xs">
                        {textEllipsis(newsItem.title, 40)}
                      </p>
                    </Link>
                    <p className="py-[2px] text-left text-xs">
                      {convertDateFormat(newsItem.createdAt)} WIB
                    </p>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
      <div className="font-semibold flex flex-col items-center space-y-5">
        <div className="flex  flex-col items-center">
          <div>
            Humas <b>POLDA</b>
          </div>
          <div>
            <UnderLine />
          </div>
        </div>
        <div className="w-full lg:w-[300px] h-[500px] lg:h-[400px] lg:p-4">
          <Swiper
            direction={"vertical"}
            centeredSlides={false}
            spaceBetween={10}
            mousewheel={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            pagination={{
              clickable: true,
            }}
            modules={[Autoplay, Pagination, Mousewheel]}
            className="mySwiper"
            slidesPerView={2}
          >
            {article?.map((newsItem: any) => (
              <SwiperSlide key={newsItem.id}>
                <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5">
                  <img
                    alt="headernews"
                    src="/headernews.png"
                    className="object-cover !h-[70%]"
                  />
                  <div className="text-black dark:text-white flex flex-col">
                    <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
                      <p className="text-left font-semibold text-xs">
                        {textEllipsis(newsItem.title, 40)}
                      </p>
                    </Link>
                    <p className="py-[2px] text-left text-xs">
                      {convertDateFormat(newsItem.createdAt)} WIB
                    </p>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </div>
  );
}