'use client'
import Link from "next/link";
import React from "react";
import { gradientClasses } from "../../../utils/constant.utils";
import { useParams } from "next/navigation";

const MenuItems = ({ menuData, tableName, seats, time }) => {
    const params = useParams();

    const restaurantbranch = params?.restaurantbranch;
    const RestaruntBranch = restaurantbranch
    
    return (
        <div className="container-fluid">
            <div className='card h-100 p-0 radius-12'>
                <div className='card-body p-3 p-lg-5'>
                    <div className='row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center '>
                        {menuData?.map((menu, index) => {
                            const gradientClass = gradientClasses[index % gradientClasses.length];
                            return (
                                <div className='col-xxl-3 col-lg-4 col-sm-6 ' key={menu.name}>
                                    <div className={`card p-3 shadow-2 radius-8 h-100 ${gradientClass} border border-white`}>
                                        <Link href={`/waiter/menu-items?menuname=${menu.name}&table=${tableName}&seats=${seats}&time=${time}`} className="cursor-pointer">
                                            <div className='card-body text-center p-0'>
                                                <h6 className='text-lg mb-0 '>{menu.menuname}</h6>
                                                <p className="m-0 text-sm">{menu.description}</p>
                                            </div>
                                        </Link>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MenuItems;
