"use client";
import { useEffect, useState } from "react";
import { format } from "date-fns";
import Link from "next/link";
import { ArticleListDataType } from "@/types/article";
import { fetchListArticles } from "@/api/apiService";

const HomeArticle = () => {
  const [articleList, setArticleList] = useState<ArticleListDataType | null>(
    null
  );

  useEffect(() => {
    const fetchArticleList = async () => {
      const data = await fetchListArticles();
      setArticleList(data.list);
    };

    fetchArticleList();
  }, []);

  return (
    <div className="page-article">
      <div className="container">
        <div className="main-title">
          <h2 className="text-center text-4xl text-sky-800 mb-[15px]">Blog</h2>
          <div className="text-center text-base text-gray-400">
            Cập nhật từ Hurasoft
          </div>
        </div>
        {articleList && Array.isArray(articleList) && articleList.length > 0 ? (
          <div>
            <div className="box-big-article flex">
              <div className="box-big" id="js-holder-big">
                {articleList.slice(0, 1).map((item) => (
                  <div className="item-article" key={item.id}>
                    <a href={`/article${item.url}`} className="image-article">
                      <img
                        src={`https://hurasoft8.hurasoft.com/${item.image.large}`}
                        width={100}
                        height={100}
                        alt={item.title}
                      />
                    </a>
                    <div className="info">
                      <div className="time">
                        <i className="fa-regular fa-clock"></i>{" "}
                        <span>
                          {format(
                            new Date(item.last_update * 1000),
                            "dd/MM/yyyy HH:mm"
                          )}
                        </span>
                      </div>
                      <a
                        href={`/article${item.url}`}
                        className="name-article line-clamp-2"
                      >
                        {item.title}
                      </a>
                    </div>
                  </div>
                ))}
              </div>
              <div className="box-small" id="js-holder-small">
                {articleList.slice(1, 3).map((item) => (
                  <div className="item-article" key={item.id}>
                    <a href={`/article/${item.url}`} className="image-article">
                      <img
                        src={`https://hurasoft8.hurasoft.com/${item.image.large}`}
                        width={100}
                        height={100}
                        alt={item.title}
                      />
                    </a>
                    <div className="info">
                      <div className="time">
                        <i className="fa-regular fa-clock"></i>{" "}
                        <span>
                          {format(
                            new Date(item.last_update * 1000),
                            "dd/MM/yyyy HH:mm"
                          )}
                        </span>
                      </div>
                      <a
                        href={`/article/${item.url}`}
                        className="name-article line-clamp-2"
                      >
                        {item.title}
                      </a>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="box-article-other mt-[50px]">
              <h2 className="title text-xl font-bold mb-[25px]">
                Xem thêm bài khác
              </h2>
              <div className="list-article flex flex-wrap" id="js-list-article">
                {articleList.map((item) => (
                  <div className="item-article" key={item.id}>
                    <Link
                      href={`/article/${item.url}`}
                      className="image-article"
                    >
                      <img
                        src={`https://hurasoft8.hurasoft.com/${item.image.large}`}
                        width={100}
                        height={100}
                        alt={item.title}
                      />
                    </Link>
                    <div className="info">
                      <div className="time">
                        <i className="fa-regular fa-clock"></i>{" "}
                        <span>
                          {format(
                            new Date(item.last_update * 1000),
                            "dd/MM/yyyy HH:mm"
                          )}
                        </span>
                      </div>
                      <Link
                        href={`/article/${item.url}`}
                        className="name-article line-clamp-2"
                      >
                        {item.title}
                      </Link>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ) : (
          <></>
        )}
      </div>
    </div>
  );
};

export default HomeArticle;
