import Link from "next/link";
import Slider from "react-slick";
import { sliderProps } from "@/utility/sliderProps";

const menuItems = [
    {
        id: 1,
        name: "Soups",
        image: "/assets/images/home/popular-items/soups.webp",
        badge: "",
        
    },
    {
        id: 2,
        name: "Appetizers",
        image: "/assets/images/home/popular-items/veg-appetizer.webp",
        badge: "",
       
    },
  
    {
        id: 3,
        name: "Idly",
        image: "/assets/images/home/popular-items/idly.webp",
        badge: "",
        
    },
    {
        id: 4,
        name: "Dosa",
        image: "/assets/images/home/popular-items/dosa.webp",
        badge: "",
        
    },
      {
        id: 5,
        name: "Uttappam",
        image: "/assets/images/home/popular-items/uttapam.webp",
        badge: "",
  
    },
     {
        id: 6,
        name: "Poori & Parotta",
        image: "/assets/images/home/popular-items/breads.webp",
        badge: "",
       
    },
    {
        id: 7,
        name: "Hakka Flavours",
        image: "/assets/images/home/popular-items/hakka.webp",
        badge: "",
       
    },
    {
        id: 8,
        name: "Egg Delights",
        image: "/assets/images/home/popular-items/egg.webp",
        badge: "",
       
    },
    {
        id: 8,
        name: "Veg Rice",
        image: "/assets/images/home/popular-items/veg-rice.webp",
        badge: "",
       
    },
    {
        id: 9,
        name: "Biryani",
        image: "/assets/images/home/popular-items/biryani.webp",
        badge: "",
   
    },
      {
        id: 11,
        name: "Curry",
        image: "/assets/images/home/popular-items/curry.webp",
        badge: "",
    
    },
      {
        id: 12,
        name: "Desserts",
        image: "/assets/images/home/popular-items/dessert.webp",
        badge: "",
       
    },
     {
        id: 12,
        name: "Beverages",
        image: "/assets/images/home/popular-items/beverages.webp",
        badge: "",
       
    },   

];

const MenuCategory = () => {
    return (
        <section className="pizza-area pt-100 rpb-70 pb-130 rpb-100 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">popular item</span>
                            <h2>POPULAR DISHES</h2>
                        </div>
                    </div>
                </div>

                <Slider {...sliderProps.pizzaActive} className="pizza-active">
                    {menuItems.map((item, index) => (
                        <div
                            className="product-item"
                            key={item.id}
                            data-aos="fade-up"
                            data-aos-delay={50 * (index + 1)}
                            data-aos-duration={1500}
                            data-aos-offset={50}
                        >
                            <div className="image">
                                <img src={item.image} alt={item.name} />
                                {item.badge && <span className="pizza-badge">{item.badge}</span>}
                            </div>
                            <div className="content">
                                <h5>
                                    {item.name}
                                </h5>
                            </div>
                        </div>
                    ))}
                </Slider>
            </div>
        </section>
    );
};

export default MenuCategory;