"use client";
import React, { useEffect, useState } from "react";
import DetailNews from "../../page/detail-news";
import SidebarDetail from "../../page/sidebar-detail";
import RelatedNews from "../../page/related-news";
import Comment from "./comment";
import { getArticleById, getListArticle } from "@/service/article";
import { useParams } from "next/navigation";
import Link from "next/link";
import { ChevronRightIcon, UserIcon } from "@/components/icons";
import { close, loading } from "@/config/swal";

export default function NewsDetailPage() {
  const params = useParams();
  const id: any = params?.id;
  const [detailArticle, setDetailArticle] = useState();
  const [articles, setArticles] = useState<any>([]);

  useEffect(() => {
    initFetch();
    getArticles();
  }, []);

  async function getArticles() {
    const req = { page: 1, search: "", limit: "50" };
    const response = await getListArticle(req);
    setArticles(response?.data?.data);
  }

  const initFetch = async () => {
    loading();
    const res = await getArticleById(id?.split("-")[0]);
    const data = res?.data?.data;
    setDetailArticle(data);
    close();
  };
  return (
    <div className="bg-white">
      <div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
        <div className="flex flex-row gap-4 items-end text-black">
          <Link href="/" className=" font-semibold text-lg">
            Beranda
          </Link>
          <ChevronRightIcon />
          <p className=" text-lg">Berita</p>
        </div>
        <div className="text-black lg:flex lg:justify-around bg-white gap-4 lg:gap-16 w-full">
          <DetailNews data={detailArticle} listArticle={articles} />
          <div className="w-auto lg:w-[25%] hidden lg:block">
            <SidebarDetail />
          </div>
        </div>

        <div className="w-full lg:w-[70%] h-auto my-2 md:my-5 lg:my-10 px-0 lg:px-3">
          <Comment id={id?.split("-")[0]} />
        </div>

        <div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
          <RelatedNews />
        </div>
        <div className="md:hidden text-black">
          <SidebarDetail />
        </div>
      </div>
    </div>
  );
}