import Link from "next/link";
import { blogPosts } from "../../utils/constant.utils"; // Import the blog data array

const BlogAreaList = () => {
  return (
    <section className="blog-area space-top space-extra-bottom">
      <div className="container">
        <div className="row gx-40">
          {blogPosts.map((post) => (

            <div key={post.id} className="col-xxl-6 col-lg-6">
              <div className="blog-single-card">
                <div className="blog-thumb">
                  <img src={post.image} alt={post.title} />
                </div>
                <div className="blog-content">
                  {/* <div className="blog-meta">
                    <Link href="/blog">
                      <i className="fas fa-user" />
                      By {post.author}
                    </Link>
                    <Link href="/blog">
                      <i className="fas fa-comments" />
                      Comments ({post.comments})
                    </Link>
                  </div> */}
                  <h3 className="blog-title m-0">
                    <Link href={`/blog/${post?.id}`}>
                      {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post.title}
                    </Link>
                  </h3>
                  <p className="blog-text">{post.shortDescription}</p>
                  {/* <Link href={post.link} className="btn style-border2">
                    READ MORE <i className="fas fa-arrow-right" />
                  </Link> */}
                  <div className="blog-date">
                    <Link href={`/blog/${post?.id}`}>
                      <span>{post.date.split(" ")[0]}</span>{post.date.split(" ")[1]}
                    </Link>
                  </div>
                </div>
              </div>

            </div>))}
        </div>
      </div>
    </section>
  );
};

export default BlogAreaList;