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

const Blog2Section = () => (
    <section className="blog-two-section section-space">
        <div className="small-container">
            <div className="blog-two-title-area mb-60">
                <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                    <span className="section-sub-title">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">
                <div className="col-xxl-8 col-xl-8 col-lg-12">
                    {blogs2[0] && (
                        <div key={blogs2[0].id} className="blog-style-two">
                            <a className="blog-image w-img" href="#">
                                <img src={blogs2[0].image} alt="" />
                            </a>
                            <div className="blog-content-area">
                                <div className="post-meta">
                                    <span className="p-relative"><a href="#"><i className="fal fa-user"></i> By Admin</a></span>
                                    <span className="p-relative"><a href="#"><i className="fal fa-calendar-alt"></i>{blogs2[0].date}</a></span>
                                </div>
                                <hr />
                                <h5 className="blog-title"><a href="#">{blogs2[0].title}</a></h5>
                                <p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p>
                                <a className="primary-btn-5 btn-hover" href="#">
                                    Read MORE &nbsp; | <i className="icon-right-arrow"></i>
                                    <span className="btn-hover-span"></span>
                                </a>
                            </div>
                        </div>
                    )}
                </div>
                <div className="col-xxl-4 col-xl-4 col-lg-12">
                    {blogs2.slice(1, 2).map((blog) => (
                        <div key={blog.id} className="blog-style-two d-block">
                            <div className="blog-content-area">
                                <div className="post-meta">
                                    <span className="p-relative"><a href="#"><i className="fal fa-user"></i> By Admin</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"><a href="#">{blog.title}</a></h5>
                                <p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p>
                                <a className="primary-btn-5 btn-hover" href="#">
                                    Read MORE &nbsp; | <i className="icon-right-arrow"></i>
                                    <span className="btn-hover-span"></span>
                                </a>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    </section>
);

export default Blog2Section;
