import {FC} from 'react';
import {Menu as AntdMenu} from 'antd';
import {useOpenKey} from './hooks';
import {ParseMenuType} from '@utils';

type Props = {
  menus: ParseMenuType[]
};

const Menu: FC<Props> = function({menus}) {
  const [{openKeys, current}, {onOpenChange, onClick}] = useOpenKey(menus);

  return (
    <AntdMenu
      data-testid='menu'
      mode='inline'
      items={menus}
      onOpenChange={onOpenChange}
      openKeys={openKeys}
      onClick={onClick}
      selectedKeys={current}
    />
  );
};

export default Menu;
