import { Outlet } from 'react-router';

import { LayoutMenu } from '~/shared/components/menu/LayoutMenu';
import { MENU_ITEMS } from '~/shared/constants/menu';

export default function Layout() {
  return (
    <div className="flex h-screen w-screen">
      <aside className="bg-primary-tertiary01 z-10 h-full w-[260px] flex-none shadow-[4px_0_5px_0_rgba(0,0,0,0.1)]">
        <div className="flex flex-col items-center bg-white pt-6 pb-4">
          <div className="flex items-center justify-center pb-7">
            <span className="text-xl font-bold text-primary">DABEEO</span>
          </div>
          <div className="text-sm text-gray-600">사용자 정보</div>
        </div>
        <div className="bg-primary flex h-12 items-center px-5 font-bold text-white">
          변화탐지관리
        </div>
        <LayoutMenu items={MENU_ITEMS} />
      </aside>
      <main className="bg-primary-tertiary02 flex flex-1 min-w-0 flex-col">
        <div className="bg-primary w-full h-4" />
        <div className="flex min-h-0 flex-1 flex-col gap-6 px-8 pt-6 pb-8">
          <div className="flex min-h-0 flex-1">
            <Outlet />
          </div>
        </div>
      </main>
    </div>
  );
}