'use client';

import { FC } from "react";

interface MenuErrorStateProps {
    error: string | null;
}

const MenuErrorState: FC<MenuErrorStateProps> = ({ error }) => {
    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="bg-red-100 dark:bg-red-900 border border-red-400 text-red-700 dark:text-red-200 px-3 py-2 rounded relative text-xs" role="alert">
                    <strong className="font-bold">Error loading menu: </strong>
                    <span className="block sm:inline">{error}</span>
                    <button
                        className="mt-2 bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded text-xs"
                        onClick={() => window.location.reload()}
                    >
                        Retry
                    </button>
                </div>
            </div>
        </div>
    );
};

export default MenuErrorState;
