import React from "react";
import Image from "next/image";
import Link from "next/link";
import { blogData } from "@/data/blog/blog";

const BlogSection: React.FC = () => {
  const { posts } = blogData;

  return (
    <section className="blog-sec space">
      <div className="carousel-container">
        <div className="sec-title">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            Blog & News
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            The agency journal news, views & beyond
          </h2>
        </div>
        <div className="row">
          {posts.slice(0, 3).map((post) => (
            <div className="col-lg-4 col-md-6" key={post.id}>
              <div
                className="blog-card"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={post.delay}
              >
                <div className="blog-img">
                  <Link href={post.url} title="">
                    <Image
                      src={post.image}
                      alt={post.title}
                      width={400}
                      height={250}
                    />
                  </Link>
                </div>
                <div className="blog-content">
                  <ul className="blog-meta">
                    <li>
                      <span>{post.author}</span>
                    </li>
                    <li>
                      <span>{post.date}</span>
                    </li>
                  </ul>
                  <h3 className="title">
                    <Link href={post.url} title="">
                      {post.title}
                    </Link>
                  </h3>
                  <Link href={post.url} className="btn-style1">
                    Read More
                    <span>
                      <Image
                        src="/assets/images/icon/arrow.svg"
                        alt="Arrow Icon"
                        width={18}
                        height={18}
                      />
                    </span>
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default BlogSection;