import { Fragment } from 'react';

import List from '@material-hu/mui/List';

import { type SidebarNavItem } from './types';

type NavSectionProps = {
  filteredItems: SidebarNavItem[];
};

const NavSection = ({ filteredItems }: NavSectionProps) => (
  <List
    sx={{ '& > .MuiListItem-root:not(:last-child)': { mb: 1.5 } }}
    disablePadding
  >
    {filteredItems.map(item => (
      <Fragment key={item.key}>{item.component}</Fragment>
    ))}
  </List>
);

export default NavSection;