'use client';

import { FC } from "react";

const MenuLoadingState: FC = () => {
    return (
        <div className="fixed top-24 p-5 left-0 right-0 w-80 border-emerald-150 border-r-2 overflow-y-auto h-[calc(100vh-6rem)]">
            <div className="flex justify-center items-center h-full">
                <div className="animate-pulse flex flex-col space-y-2 w-full">
                    <div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
                    <div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
                    <div className="h-6 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
                    <div className="text-center text-xs text-gray-500 dark:text-gray-400 mt-2">Loading menu...</div>
                </div>
            </div>
        </div>
    );
};

export default MenuLoadingState;