import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Image from 'next/image';
const pages = ['Home', 'Menu', 'About', 'Store', 'Contact'];

const Navbar = () => {
  // const { data: session } = useSession();
  // const [anchorElNav, setAnchorElNav] = useState(null);
  // const [anchorElUser, setAnchorElUser] = useState(null);

  // const handleOpenNavMenu = (event) => {
  //   setAnchorElNav(event.currentTarget);
  // };
  // const handleOpenUserMenu = (event) => {
  //   setAnchorElUser(event.currentTarget);
  // };

  // const handleCloseNavMenu = () => {
  //   setAnchorElNav(null);
  // };

  // const handleCloseUserMenu = () => {
  //   setAnchorElUser(null);
  // };

  // function logoutHandler() {
  //   signOut();
  // }

  return (
    <AppBar
      position="absolute"
      sx={{
        zIndex: 100,
        top: 20,
        width: '100%',
        backgroundColor: 'transparent',
        boxShadow: 'none',
        height: 40,
      }}
    >
      <Box sx={{ display: 'flex', width: '100%' }}>
        <Box
          sx={{
            flexGrow: 1,
            maxWidth: '50%',
            height: 30,
            display: { xs: 'none', md: 'flex' },
            px: 10,
          }}
        >
          {pages.map((page) => (
            <Typography
              key={page}
              textAlign="center"
              sx={{ mx: 'auto', fontSize: 20, fontWeight: 500, color: 'black' }}
            >
              {page}
            </Typography>
          ))}
        </Box>
        <Box
          sx={{
            flexGrow: 1,
            maxWidth: '50%',
            height: 30,
            display: { xs: 'none', md: 'flex' },
            justifyContent: 'right',
            pt: 0.5,
            mr: 4,
          }}
        >
          <Box
            sx={{
              mx: 2,
            }}
          >
            <Image
              src="/images/profile.svg"
              alt="profile"
              width={24}
              height={24}
            />
          </Box>
          <Box
            sx={{
              mr: 6,
              ml: 2,
            }}
          >
            <Image src="/images/cart.svg" alt="cart" width={24} height={24} />
          </Box>
        </Box>
      </Box>
    </AppBar>
  );
};
export default Navbar;