import Image from "next/image";
import Link from "next/link";
import { getPublishedBlogs } from "../../lib/blogs";

export default async function Home() {
  const blogs = await getPublishedBlogs();

  return (
    <section className="section-our-blog" data-aos="fade-up">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-xxl-8 col-xl-8 col-lg-9 col-md-12 col-sm-12 col-12">
            <div className="title">
              <h2 data-aos="fade-down">Our Blogs</h2>
              <p data-aos="fade-up" data-aos-delay="100">
                Explore expert insights, publishing tips, and industry trends to help authors navigate their book publishing journey successfully.
              </p>
            </div>
          </div>
        </div>
        <div className="row gy-4" id="blogList">
          {blogs.length > 0 ? (
            blogs.map((blog, index) => (
              <div
                key={blog.id}
                className="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12"
              >
                <div
                  className="blog-card"
                  data-aos="fade-right"
                  data-aos-delay={index * 50}
                >
                  <Link href={`/${blog.slug}`}>
                    <div className="blog-imgg">
                      {blog.featuredImageUrl ? (
                        <Image
                          src={blog.featuredImageUrl}
                          alt={blog.imageAlt}
                          title={blog.imageTitle}
                          width={600}
                          height={277}
                          unoptimized
                          className="img-fluid blog-featured-img"
                          style={{
                            width: "100%",
                            height: "277px",
                            objectFit: "cover",
                          }}
                        />
                      ) : null}
                    </div>
                    <div className="content">
                      <h2>{blog.title}</h2>
                      <p>{blog.excerpt}</p>
                      <span>
                        Read More <i className="fa-solid fa-arrow-right"></i>
                      </span>
                    </div>
                  </Link>
                </div>
              </div>
            ))
          ) : (
            <div className="col-12">
              <p className="text-center">No blogs have been published yet.</p>
            </div>
          )}
        </div>
        <div className="pagination-wrapper text-center mt-4" id="pagination"></div>
      </div>
    </section>
  );
}
