import { MenuList } from '../component/menu/MenuList.tsx';
import { useMenuList } from '../hook/useMenuList.ts';

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

  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>}
        {errorMessage && <p style={{ padding: '0 20px', color: '#ffd1d1' }}>{errorMessage}</p>}
        <MenuList headMenuList={headMenuList} menuList={menuList} />
      </nav>
    </div>
  );
};