"use client"
import DashBoardLayerOne from "@/components/DashBoardLayerOne";
import FloorComponent from "@/components/floor-component/FloorComponent";
import MainComponent from "@/components/home/MainComponent";
import MasterLayout from "@/masterLayout/MasterLayout";
import { Suspense, useEffect, useState } from "react";
import client from "@auth";
import MenuItems from "@/components/menu-component/MenuItems";
import { useSearchParams } from 'next/navigation';
import PageLoader from "@/components/common-component/PageLoader";
import PageNoData from "@/components/common-component/PageNoData";
import Breadcrumb from "@/components/Breadcrumb";
// export const metadata = {
//   title: "WowDash NEXT JS - Admin Dashboard Multipurpose Bootstrap 5 Template",
//   description:
//     "Wowdash NEXT JS is a developer-friendly, ready-to-use admin template designed for building attractive, scalable, and high-performing web applications.",
// };

const MenuItemsPageInner = () => {

    const searchParams = useSearchParams();

    const tableName = searchParams.get('table');
    const seats = searchParams.get('seats');
    const time = searchParams.get('time')

    const [menuData, setMenuData] = useState(null);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(true);


    useEffect(() => {
        getMenuItems();
    }, []);

    const getMenuItems = async () => {
        try {
            setLoading(true);
            const res = await client?.get(`/Dine360 Menu?fields=[\"*\"]&limit_page_length=100`);
            setMenuData(res?.data?.data);
        } catch (error) {
            console.error("Error fetching floor data:", error);
            setError(error?.message || "Failed to fetch floor data");
        } finally {
            setLoading(false);
        }
    };



    return (
        <>
            {
                loading ? (
                    <PageLoader />
                ) : menuData?.length == 0 ? (
                    <PageNoData />
                ) : (
                    <MenuItems menuData={menuData} tableName={tableName} seats={seats} time={time} />
                )
            }
        </>
    );
};


const MenuItemsPage = (() => {
    return (
        <MasterLayout>
            <Breadcrumb title="Menu Category" />
            <Suspense fallback={<PageLoader />}>
                <MenuItemsPageInner />
            </Suspense>
        </MasterLayout>
    )
})

export default MenuItemsPage;
