import { getBlogs } from "../../lib/blogs";
import BlogCard from "../../components/blog/BlogCard";
import BlogPagination from "../../components/blog/BlogPagination";

export const dynamic = "force-dynamic";

interface BlogsPageProps {
  searchParams: Promise<{
    page?: string;
  }>;
}

export default async function BlogsPage({
  searchParams,
}: BlogsPageProps) {
  const params = await searchParams;

  const pageNumber = Number(params?.page || 1);

  const page =
    Number.isInteger(pageNumber) && pageNumber > 0
      ? pageNumber
      : 1;

  const {
    blogs,
    currentPage,
    totalBlogs,
    totalPages,
  } = await getBlogs(page, 12);

  return (
    <main className="blogs-page">

      <section className="blogs-header">
        <div className="container">
          <h1>Our Blogs</h1>

          <p>
            Explore our latest astrology, numerology,
            spirituality and lifestyle articles.
          </p>
        </div>
      </section>

      <section className="blogs-section">
        <div className="container">

          {blogs.length === 0 ? (
            <div className="text-center py-5">
              <h3>No blogs found</h3>

              <p>
                There are currently no published blogs.
              </p>
            </div>
          ) : (
            <>
              <div className="blog-result-count mb-4">
                Showing page {currentPage} of {totalPages}
                {" "}({totalBlogs} blogs)
              </div>

              <div className="row">
                {blogs.map((blog) => (
                  <BlogCard
                    key={blog.id}
                    blog={blog}
                  />
                ))}
              </div>

              <BlogPagination
                currentPage={currentPage}
                totalPages={totalPages}
              />
            </>
          )}

        </div>
      </section>

    </main>
  );
}