import { Box, BoxProps } from '@mui/material';
import { styled } from '../Theme';

const Group = styled(Box)`
  padding: 16px 24px;
  border-radius: 8px;
  background-color: ${({ theme }) => theme.palette.background.paper};
  cursor: auto;

  .group-label {
    margin-bottom: 8px;
    color: ${({ theme }) => theme.palette.grey[600]};
    font-size: 12px;
  }

  .nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }
`;

export interface NavMenuSubItemGroupProps extends BoxProps {
  label: React.ReactNode;
}

export default function NavMenuSubItemGroup({
  label,
  children,
  className = '',
  sx,
  ...rest
}: NavMenuSubItemGroupProps) {
  return (
    <Group className={`nav-menu-sub-item-group ${className}`} sx={{ ...sx }} {...rest}>
      <Box className="group-label">{label}</Box>
      <Box component="ul" className="nav">
        {children}
      </Box>
    </Group>
  );
}
