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

const ListOfBlogSection = () => {
    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 at Shiva Sakthi
                            </h2>
                            <p
                                data-aos="fade-left"
                                data-aos-duration={1500}
                                data-aos-offset={50}>
                                Welcome to the Shiva Sakthi Restaurant blog — your go-to place for delicious food stories, culinary insights, and everything related to authentic South Indian dining. Here, we share expert tips, traditional recipes, festival specials, and behind-the-scenes glimpses from our kitchen. Whether you’re a long-time customer or discovering us for the first time, our blog helps you explore the rich flavours, preparation methods, and cultural roots behind every dish we serve. At Shiva Sakthi Restaurant, we believe food is more than a meal — it’s an experience filled with warmth, tradition, and community. Through these articles, we aim to educate, inspire, and connect with food lovers who appreciate quality, freshness, and homemade taste. Dive in and enjoy a flavourful journey with us.
                            </p>
                        </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} />
                                        </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 ListOfBlogSection;