import { blogs } from "@/utils/data";

const BlogSection = () => (
    <section className="blog-section-one section-space">
        <div className="small-container">
            <div className="blog-title-box mb-40">
                <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                    <span className="section-sub-title no-border">Blog & news</span>
                    <h3 className="section-title mt-10">Explore Blogs and News</h3>
                </div>
                <a className="primary-btn-1 btn-hover" href="#">
                    view all &nbsp; | <i className="icon-right-arrow"></i>
                    <span className="btn-hover-span"></span>
                </a>
            </div>
            <div className="row g-4">
                {blogs.slice(0, 3).map((blog, index) => (
                    <div key={blog.id} className="col-xxl-4 col-xl-4 col-lg-6">
                        <div className="blog-style-one">
                            <a className="blog-image w-img" href="#">
                                <img src={blog.image} alt="" />
                            </a>
                            <div className="blog-content">
                                <div className="post-meta">
                                    <span className="p-relative"><a href="#"><i className="fal fa-user"></i> By {blog.authorName}</a></span>
                                    <span className="p-relative"><a href="#"><i className="fal fa-calendar-alt"></i>{blog.date}</a></span>
                                </div>
                                <hr />
                                <h5 className="blog-title mb-30"><a href="#">{blog.title}</a></h5>
                                <div className="blog-link">
                                    <a className="primary-btn-1 btn-hover" href="#">
                                        Read MORE &nbsp; | <i className="icon-right-arrow"></i>
                                        <span className="btn-hover-span"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

export default BlogSection;
