import { useContext } from 'react';
import { Link } from 'react-router-dom';
import { AppBar, Button, IconButton, Stack, Toolbar, Typography } from '@mui/material';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import { useTheme } from '@mui/material/styles';
import { ThemeContext } from '../ThemeContextProvider';

function NavBar() {
  const theme = useTheme();
  const { toggleColorMode } = useContext(ThemeContext);

  const pages = [
    { name: 'Schedule', to: '/schedule'},
    { name: 'RSVP', to: '/guest-login' },
    { name: 'Registry', to: '/registry' },
    { name: 'Admin', to: '/admin' }
  ];

  return (
    <AppBar position="relative">
      <Toolbar>
        <Typography
          variant="h5"
          component={Link}
          to="/"
          color="inherit"
          sx={{ textDecoration: 'none' }}
          >
          Madison and Michael's Wedding
        </Typography>
        <Stack direction="row" sx={{ marginLeft: 'auto' }}>
          {pages.map(page => (
            <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
              {page?.name}
            </Button>
          ))}
          <IconButton color="inherit" onClick={toggleColorMode}>
            {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
          </IconButton>
        </Stack>
      </Toolbar>
    </AppBar>
  );
}

export default NavBar;