import Link from "next/link";

const PopularMenu = () => {
    const menuData = [
        {
            title: "Medhu Vada",
            price: "$7.99",
            description: "The popular soft and savory appetizer",
            image: "/assets/images/home/popular-menu/medhu-vada.webp",
        },
        {
            title: "Garlic Naan",
            price: "$1.99",
            description: "Naan infused with garlic",
            image: "/assets/images/home/popular-menu/garlic-naan.webp",
        },
        {
            title: "King Fish Fry",
            price: "$17.99",
            description: "House Special - Premium King Fish Slice Fry",
            image: "/assets/images/home/popular-menu/fish-fry.webp",
        },
        {
            title: "Paruppu pradhaman",
            price: "$3.99",
            description: "south style Payasam made with cocunut, Lentils and Jaggery",
            image: "/assets/images/home/popular-menu/paruppu-pradhaman.webp",
        },
        {
            title: "Egg Bhurji (Podimas)",
            price: "$11.99",
            description: "Masala Egg Bhurji (Podimas)",
            image: "/assets/images/home/popular-menu/egg-kothu.webp",
        },
        {
            title: "Veg Biryani",
            price: "$13.99",
            description: "Cooked in Chettinadu style using Basmati rice",
            image: "/assets/images/home/popular-menu/veg-birani.webp",
        },
        {
            title: "Hakka Noodles (veg) ",
            price: "$13.99",
            description: "Hakka Flovored Noodles",
            image: "/assets/images/home/popular-menu/veg-hakka.webp",
        },
        {
            title: "Thalapakattu Mutton Biryani",
            price: "$16.99",
            description: "Authentic Thalapakattu style in seeraga samba rice",
            image: "/assets/images/home/popular-menu/thalappakatti-mutton-biryani.webp",
        },
        {
            title: "PIZZA DOSA",
            price: "$14.99",
            description: "Classic Dosa made to taste like pizza and favorite with kids and adults alike",
            image: "/assets/images/home/popular-menu/pizza-dosa.webp",
        },
        {
            title: "Payasam",
            price: "$3.99",
            description: "Traditional Tamilnadu style vermichilli payasam",
            image: "/assets/images/home/popular-menu/payasam.webp",
        },
    ];

    return (
        <section className="popular-menu-area-three pt-130 rpt-100 pb-115 rpb-90 rel z-1">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-lg-7 col-md-8">
                        <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">popular menu</span>
                            <h2>
                                From Authentic Indian Kitchen
                            </h2>
                        </div>
                    </div>
                </div>
                <div className="row no-gap">
                    {[0, 1].map((colIndex) => (
                        <div className="col-lg-6" key={colIndex}>
                            <div
                                className="popular-menu-wrap"
                                data-aos={colIndex === 0 ? "fade-left" : "fade-right"}
                                data-aos-duration={1500}
                                data-aos-offset={50}
                            >
                                {menuData
                                    .slice(colIndex * 5, (colIndex + 1) * 5)
                                    .map((item, index) => (
                                        <div className="food-menu-item style-two" key={index}>
                                            <div className="image">
                                                <img src={item.image} alt={item.title} loading="lazy" />
                                            </div>
                                            <div className="content">
                                                <h5>
                                                    <span className="title">{item.title}</span>{" "}
                                                    <span className="dots" />{" "}
                                                    <span className="price">{item.price}</span>
                                                </h5>
                                                <p>{item.description}</p>
                                            </div>
                                        </div>
                                    ))}
                            </div>
                        </div>
                    ))}
                </div>
                <div className="text-center mt-3">
                    <a className="theme-btn style-two" href="/menu">View Full Menu <i className="far fa-arrow-alt-right"></i></a>
                </div>
            </div>
            <div className="menu-items-shape">
                <div className="shape one">
                    <img src="/assets/images/home/popular-menu/left.webp" alt="Shape" loading="lazy" />
                </div>
                <div className="shape two">
                    <img src="/assets/images/home/popular-menu/right.webp" alt="Shape" loading="lazy" />
                </div>
            </div>
        </section>
    );
};

export default PopularMenu;