import { Blog } from "@/utility/constant.utils";
import Link from "next/link";

const BlogSection = () => {
    return (
        <section className="blog-area pt-100 rpt-70 pb-90 rpb-60 rel z-1">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-lg-12">
                        <div
                            className="section-title text-center mb-50"
                            data-aos="fade-up"
                            data-aos-duration={1500}
                            data-aos-offset={50}
                        >
                            <span className="sub-title mb-5">The Latest News What We Have</span>
                            <h2>Our Latest Food News</h2>
                        </div>
                    </div>
                </div>
                <div className="row justify-content-center">
                    {
                        Blog?.map((blog) => {
                            return (
                                <div className="col-xl-4 col-md-6" key={blog?.id}>
                                    <div
                                        className="blog-item"
                                        data-aos="fade-up"
                                        data-aos-delay={50}
                                        data-aos-duration={1500}
                                        data-aos-offset={50}
                                    >
                                        <div className="image">
                                            <img src={blog?.image} alt={blog?.slug} loading="lazy" />
                                        </div>
                                        <div className="content">
                                            <h4>
                                                <Link href={`/blog/${blog?.slug}`}>
                                                    {blog?.title}
                                                </Link>
                                            </h4>
                                            <p>
                                                {blog?.short_des}
                                            </p>
                                            <Link href={`/blog/${blog?.slug}`} className="read-more">
                                                Read more <i className="far fa-arrow-alt-right" />
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </section>
    );
};

export default BlogSection;