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

const CategorySection = () => {
    const CategoryData = [
        {
            id: 1,
            title: "Soups & Salads",
            image: "/assets/images/home/category/salads.webp",
        },
        {
            id: 2,
            title: "Veg Appetizers",
            image: "/assets/images/home/category/veg-appetizer.webp",
        },
        {
            id: 3,
            title: "Non - Veg Appetizers",
            image: "/assets/images/home/category/chicken-appetizer.webp",
        },
        {
            id: 4,
            title: "Egg Delights",
            image: "/assets/images/home/category/egg.webp",
        },
        {
            id: 5,
            title: "DOSA",
            image: "/assets/images/home/category/dosa.webp",
        },
        {
            id: 6,
            title: "IDLY",
            image: "/assets/images/home/category/idly.webp",
        },
        {
            id: 7,
            title: "Uttapam",
            image: "/assets/images/home/category/uthappam.webp",
        },
        {
            id: 8,
            title: "Indian Breads",
            image: "/assets/images/home/category/indian-breads.webp",
        },
        {
            id: 9,
            title: "Tandoori Breads",
            image: "/assets/images/home/category/tandoor-breads.webp",
        },
        {
            id: 10,
            title: "Hakka",
            image: "/assets/images/home/category/hakka.webp",
        },
        {
            id: 11,
            title: "Veg Biryani",
            image: "/assets/images/home/category/veg-biryani.webp",
        },
        {
            id: 12,
            title: "Veg Curry",
            image: "/assets/images/home/category/veg-curry.webp",
        },
        {
            id: 13,
            title: "NON - Veg Biryani",
            image: "/assets/images/home/category/nonveg-biryani.webp",
        },
        {
            id: 14,
            title: "NON - Veg Curry",
            image: "/assets/images/home/category/nv-curry.webp",
        },
        {
            id: 15,
            title: "Deserts",
            image: "/assets/images/home/category/dessert.webp",
        },
        {
            id: 16,
            title: "Beverages",
            image: "/assets/images/home/category/beverages.webp",
        }
    ];

    return (
        <section className="related-products-area pt-130 rpt-100 pb-100 rpb-70 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">South Indian And North Indian</span>
                            <h2>POPULAR DISHES</h2>
                        </div>
                    </div>
                </div>
                <Slider {...sliderProps.categorySlider}>
                    {CategoryData.map((cat) => (
                        <div key={cat.id} className="px-2">
                            <div className="product-item-two">
                                <div className="image">
                                    <img src={cat.image} alt={cat.title} />
                                </div>
                                <div className="content" style={{ backgroundColor: "#ffb936" }}>
                                    <h5>{cat.title}</h5>
                                </div>
                            </div>
                        </div>
                    ))}
                </Slider>
            </div>
            <div className="testimonials-shapes">
                <div className="shape one">
                    <img src="/assets/images/home/popular-menu/right.webp" alt="Shape" style={{ width: "50%" }} />
                </div>
                {/* <div className="shape two">
                    <img src="assets/images/shapes/hero-shape3.png" alt="Shape" />
                </div>
                <div className="shape three">
                    <img src="assets/images/shapes/hero-shape3.png" alt="Shape" />
                </div> */}
                <div className="shape four">
                    <img src="/assets/images/home/popular-menu/left.webp" alt="Shape" style={{ width: "50%" }} />
                </div>
            </div>
        </section>
    );
};

export default CategorySection;