import React from 'react';
import { Layout } from 'antd';
import { Outlet, useLocation } from 'react-router-dom';
import classnames from 'classnames';

import { LinkMenu } from '@/components';
import style from './index.module.less';

const MenuInfos = [
  {
    path: '/',
    label: '项目管理',
  },
  {
    path: '/asset-manage',
    label: '数字要素资产',
  },
];

export default function MainLayout() {
  const location = useLocation();
  const currentPath = React.useMemo(() => location.pathname, [location]);

  return (
    <Layout className="!h-[100vh]">
      {/* header */}
      <Layout.Header className={classnames(style.header, '!p-0')}>
        {/* logo */}
        <div className="h-18 px-6 pt-5">
          <div className={style.logo} />
        </div>

        {/* LinkMenu */}
        <LinkMenu menus={MenuInfos} defaultSelectedKey={currentPath || MenuInfos[0].path} />
      </Layout.Header>

      {/* main */}
      <Layout.Content>
        <Outlet />
      </Layout.Content>
    </Layout>
  );
}