import { useLayoutDrawerState, useLayoutMediaState } from '@/components/Layout/Provider';
import { useSx } from '@/hooks';
import { Box, SxProps } from '@mui/material';
import { PropsWithChildren } from 'react';

type NavListProps = PropsWithChildren<{ sx?: SxProps }>;

function NavList(props: NavListProps): JSX.Element {
  const { horizontal } = useLayoutMediaState();
  const { open } = useLayoutDrawerState();

  const sx = useSx(props, {
    pt: open ? (horizontal ? 0 : 2) : 0,
    '& > ul:first-of-type': { mt: 0 },
    display: horizontal ? { xs: 'block', lg: 'flex' } : 'block'
  });

  return <Box sx={sx}>{props.children}</Box>;
}

export { NavList };