import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';

import Typography from '@mui/material/Typography';

import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';

import { Link } from 'react-router-dom';

const pages = [
  { name: 'Login', path: '/login' },
  { name: 'Register', path: '/register' },
];

function Navbar() {
  return (
    <AppBar
      position='fixed'
      sx={{
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        height: 64,
        transition: 'background-color 0.5s',
        boxShadow: 'none',

        '&:hover': {
          backgroundColor: '#000',
        },
      }}
    >
      <Container maxWidth='xl'>
        <Toolbar
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              flexGrow: 1,
            }}
          >
            <Avatar
              alt='Eledana'
              sx={{ width: 24, height: 24, mr: 1 }}
              src='logo.png'
            />
            <Typography
              variant='h6'
              noWrap
              component='a'
              sx={{
                mr: 2,
                display: { xs: 'none', md: 'flex' },
                fontFamily: 'monospace',
                fontWeight: 700,
                letterSpacing: '.3rem',
                color: 'inherit',
                textDecoration: 'none',
              }}
            >
              ELEDANA
            </Typography>
          </Box>

          <Box
            sx={{
              display: 'flex',
              gap: 4,
            }}
          >
            {pages.map((page) => (
              <Link
                to={page.path}
                style={{ color: 'inherit', textDecoration: 'none' }}
              >
                <Typography
                  variant='h6'
                  noWrap
                  component='a'
                  sx={{
                    color: 'inherit',
                    textDecoration: 'none',
                    fontSize: { xs: '1rem', md: '1.5rem' },
                    '&:hover': {
                      textDecoration: 'underline',
                    },
                  }}
                >
                  {page.name}
                </Typography>
              </Link>
            ))}
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}
export default Navbar;
