import Background from './Background';
import type { MenuProps } from 'antd';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { Menu } from 'ui/elements';
import { AppstoreOutlined, SettingOutlined } from 'ui/elements/icons';

const items: MenuProps['items'] = [
  {
    children: [
      {
        // icon: <HomeOutlined />,
        key: '/',
        label: (
          <Link prefetch={false} href="/">
            Главная
          </Link>
        ),
      },
      {
        // icon: <PlusSquareOutlined />,
        key: '/unlimited',
        label: (
          <Link prefetch={false} href="/unlimited">
            Без ограничений
          </Link>
        ),
      },
    ],
    icon: <AppstoreOutlined />,
    key: 'home',
    label: 'Приложение',
  },
  {
    children: [
      {
        // icon: <DatabaseOutlined />,
        key: '/admin/cache',
        label: (
          <Link prefetch={false} href="/admin/cache">
            Управление кэшем
          </Link>
        ),
      },
    ],
    icon: <SettingOutlined />,
    key: 'admin',
    label: 'Панель управления',
  },
];

export function AppMenu() {
  const { pathname } = useRouter();

  return (
    <Background>
      <Menu selectedKeys={[pathname]} mode="horizontal" items={items} />
    </Background>
  );
}