import Article from "./Article";
import Pagination from "@/app/component/Pagination";

function LatestArticles({ blogs, page, totalPages, onPageChange, isLoading }) {
  return (
    <div>
      <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
        جدیدترین مقاله ها
      </p>
      {isLoading ? (
        <div className="flex justify-center items-center min-h-[400px]">
          <p className="text-[#9B9B9B] text-[16px]">در حال بارگذاری...</p>
        </div>
      ) : blogs && blogs.length > 0 ? (
        <>
          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
            {blogs.map((item) => (
              <Article data={item} key={item.uuid} />
            ))}
          </ul>
          {totalPages > 1 && (
            <div className="mt-[56px] flex justify-center">
              <Pagination
                page={page}
                totalPages={totalPages}
                onPageChange={onPageChange}
              />
            </div>
          )}
        </>
      ) : (
        <div className="flex justify-center items-center min-h-[400px]">
          <p className="text-[#9B9B9B] text-[16px]">مقاله‌ای یافت نشد</p>
        </div>
      )}
    </div>
  );
}

export default LatestArticles;