'use client';

import ListSubheader from '@mui/material/ListSubheader';
import { Theme } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import { MenuItemType } from '../types/sidebar';

interface NavGroupProps {
  item: MenuItemType;
  hideMenu: boolean | string;
}

const ListSubheaderStyle = styled((props: Theme | any) => (
  <ListSubheader disableSticky {...props} />
))(({ theme }) => ({
  ...theme.typography.overline,
  fontWeight: '700',
  marginTop: theme.spacing(3),
  marginBottom: theme.spacing(0),
  color: theme.palette.text.primary,
  lineHeight: '26px',
  padding: '3px 12px',
  marginLeft: 0,
}));

export default function NavGroup({ item, hideMenu }: NavGroupProps) {
  return (
    <ListSubheaderStyle>
      {hideMenu ? <MoreHorizIcon fontSize="small" /> : item?.subheader}
    </ListSubheaderStyle>
  );
}
