"use client";
import { useParams } from "next/navigation";
import { format } from "date-fns";
import { useEffect, useState } from "react";
import { ArticleDetailDataType } from "@/types/article";
import { fetchArticleDetail } from "@/api/apiService";

const ArticleDetail = () => {
  const { slug } = useParams();
  const [ArticleDetail, setArticleDetails] =
    useState<ArticleDetailDataType | null>(null);

  useEffect(() => {
    if (typeof slug === "string") {
      const getArticleDetail = async () => {
        const data = await fetchArticleDetail(slug);
        setArticleDetails(data[0]);
      };
      getArticleDetail();
    }
  }, [slug]);

  return (
    <div className="page-article">
      <div className="container">
        {ArticleDetail ? (
          <div className="content-article-detail">
            <div className="time">
              {format(new Date(ArticleDetail.last_update * 1000), "dd/MM/yyyy")}
            </div>
            <h1 className="title-article">{ArticleDetail.title}</h1>

            <div className="summary">{ArticleDetail.summary}</div>

            <div className="thumbnail">
              <img
                src={`https://hurasoft8.hurasoft.com/${ArticleDetail.image.large}`}
                width="100%"
                height="100%"
                alt=""
              />
            </div>

            <div
              className="content nd"
              dangerouslySetInnerHTML={{ __html: ArticleDetail.content }}
            />
          </div>
        ) : (
          <div className="h-screen flex justify-center items-center text-2xl font-bold">
            Bài viết đang cập nhật...!
          </div>
        )}
      </div>
    </div>
  );
};

export default ArticleDetail;
