"use client";
import { ArticlesData } from "@/data/article";
import { format } from "date-fns";

const Home = () => {
  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>
        <div className="box-big-article flex">
          <div className="box-big" id="js-holder-big">
            {ArticlesData.list.slice(0, 1).map((articles) => (
              <div className="item-article" key={articles.id}>
                <a href={articles.url} className="image-article">
                  <img
                    src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
                    width={100}
                    height={100}
                    alt={articles.title}
                  />
                </a>
                <div className="info">
                  <div className="time">
                    <i className="fa-regular fa-clock"></i>{" "}
                    <span>
                      {format(
                        new Date(articles.last_update * 1000),
                        "dd/MM/yyyy HH:mm"
                      )}
                    </span>
                  </div>
                  <a href={articles.url} className="name-article line-clamp-2">
                    {articles.title}
                  </a>
                </div>
              </div>
            ))}
          </div>
          <div className="box-small" id="js-holder-small">
            {ArticlesData.list.slice(1, 3).map((articles) => (
              <div className="item-article" key={articles.id}>
                <a href={articles.url} className="image-article">
                  <img
                    src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
                    width={100}
                    height={100}
                    alt={articles.title}
                  />
                </a>
                <div className="info">
                  <div className="time">
                    <i className="fa-regular fa-clock"></i>{" "}
                    <span>
                      {format(
                        new Date(articles.last_update * 1000),
                        "dd/MM/yyyy HH:mm"
                      )}
                    </span>
                  </div>
                  <a href={articles.url} className="name-article line-clamp-2">
                    {articles.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">
            {ArticlesData.list.map((articles) => (
              <div className="item-article" key={articles.id}>
                <a href={articles.url} className="image-article">
                  <img
                    src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
                    width={100}
                    height={100}
                    alt={articles.title}
                  />
                </a>
                <div className="info">
                  <div className="time">
                    <i className="fa-regular fa-clock"></i>{" "}
                    <span>
                      {format(
                        new Date(articles.last_update * 1000),
                        "dd/MM/yyyy HH:mm"
                      )}
                    </span>
                  </div>
                  <a href={articles.url} className="name-article line-clamp-2">
                    {articles.title}
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;
