import { min } from '@/styles/mq';
import type { MenuProps } from 'antd';
import type { PropsWithChildren } from 'react';
import styled from 'styled-components';
import { Menu } from 'ui/elements';
import { DatabaseOutlined, HomeOutlined } from 'ui/elements/icons';
import { Flex } from 'ui/grid';

const items: MenuProps['items'] = [
  {
    disabled: true,
    icon: <HomeOutlined />,
    key: 'home',
    label: 'Главная',
  },
  {
    icon: <DatabaseOutlined />,
    key: 'cache-control',
    label: 'Управление кэшем',
  },
];

const Wrapper = styled.div`
  ${min('laptop')} {
    height: calc(100vh - var(--height-header));
    overflow-y: scroll;
  }
`;

const MenuWrapper = styled(Wrapper)`
  > :first-child {
    min-height: 100%;
    width: 280px;
  }
`;

const ContentWrapper = styled(Wrapper)`
  flex: 1;
`;

export function Layout({ children }: PropsWithChildren) {
  return (
    <Flex>
      <MenuWrapper>
        <Menu mode="inline" items={items} />
      </MenuWrapper>
      <ContentWrapper>{children}</ContentWrapper>
    </Flex>
  );
}