import { Box, ListItemButton, ListItemText, Typography } from '@mui/material';
import Link from 'next/link';

export const NavItemMobile = ({ toggleDrawer, icon, name, url }) => {
  return (
    <ListItemButton>
      <Link href={url}>
        <ListItemText
          onClick={toggleDrawer(false)}
          primary={
            <Box sx={{ display: 'flex' }}>
              <Box sx={{ mt: 0.4, mr: 2 }}>{icon}</Box>
              <Typography
                sx={{ fontSize: '22px' }}
                style={{ color: 'primary.main' }}
              >
                {name}
              </Typography>
            </Box>
          }
        />
      </Link>
    </ListItemButton>
  );
};

export const NavItemDesktop = ({ url, router, name }) => {
  return (
    <Box sx={{ width: 150, mr: 3, ml: 3 }}>
      <Link href={url}>
        <Typography
          textAlign="center"
          sx={{
            mx: 'auto',
            width: '100%',
            fontSize: { md: 24, lg: 24 },
            mt: -1,
            fontWeight: 500,
            color: router.pathname === '/' ? 'white' : 'primary.main',
            textDecoration: 'none',
            cursor: 'pointer',
          }}
        >
          {name}
        </Typography>
      </Link>
    </Box>
  );
};