import { Fragment, ReactNode } from 'react';

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

export type Item = {
  key: string | number;
  component: ReactNode;
};

export type NavSectionProps = {
  filteredItems: Item[];
};

const NavSection = (props: NavSectionProps) => {
  const { filteredItems } = props;

  return (
    <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;