import articles from "@/data/articles.json";
import Article from "./Article";
import Pagination from "@/app/component/Pagination";

function LatestArticles({ loading }) {
  return (
    <div>
      <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
        جدیدترین مقاله ها
      </p>
      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
        {articles.map((item) => (
          <Article data={item} key={item.id} loading={loading} />
        ))}
      </ul>
      <div className="mt-[56px] flex justify-center">
        <Pagination />
      </div>
    </div>
  );
}

export default LatestArticles;