import {useEffect} from 'react';
import {toast} from 'react-toastify';
import {MenuList} from '../component/menu/MenuList.tsx';
import {useMenuList} from '../hook/useMenuList.ts';

export const AdminSideBar = () => {
  const {headMenuList, menuList, isLoading, errorMessage} = useMenuList();

  useEffect(() => {
    if (errorMessage) {
      toast.error(errorMessage);
    }
  }, [errorMessage]);

  return (
    <div className="menu_wrap">
      <h1 className="logo">
        <a href="/">DashBoard</a>
      </h1>
      <nav className="menu">
        {isLoading && <p style={{padding: '0 20px', color: '#fff'}}>메뉴 로딩중...</p>}
        <MenuList headMenuList={headMenuList} menuList={menuList} />
      </nav>
    </div>
  );
};