import { Link } from 'react-router-dom';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

function Bar() {
  const pages = [
    { name: 'Schedule', to: '/schedule'},
    { name: 'RSVP', to: '/rsvp' },
    { name: 'Registry', to: '/registry' }
  ];

  return (
    <AppBar position="relative">
      <Toolbar>
        <Typography
          variant="h4"
          component={Link}
          to="/"
          color="inherit"
          sx={{ textDecoration: 'none' }}
          >
          Wedding
        </Typography>
        <Box sx={{ marginLeft: 'auto' }}>
          {pages.map((page) => (
            <Button component={Link} to={page.to} key={page.name} color="inherit">
              {page.name}
            </Button>
          ))}
        </Box>
      </Toolbar>
    </AppBar>
  );
}

export default Bar;