import s from './styles.module.scss';
import clsx from 'clsx';
import { TMenuItem } from '@shared/const/menu';
import { ROUTES } from '@shared/const/route';
import { MenuList } from '@widgets/sidebar/menu-list';

type SidebarProps = {
  isOpen: boolean;
  onClose: () => void;
  list: TMenuItem[];
};

function Sidebar({ isOpen, onClose, list }: SidebarProps) {
  const menuData = [
    {
      title: 'Главная',
      link: ROUTES.HOME,
    },
    ...list,
  ];

  return (
    <>
      <div
        className={clsx(s.Overlay, isOpen && s.Overlay_show)}
        onClick={onClose}
      />
      <aside className={clsx(s.Sidebar, isOpen && s.Sidebar_open)}>
        <MenuList
          items={menuData}
          level={0}
          onClose={onClose}
          isOpen={isOpen}
        />
      </aside>
    </>
  );
}

export { Sidebar };
