import React from 'react';
import { Link, useLocation } from 'react-router-dom';

import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material';

const Header: React.FC = () => {
  const location = useLocation();

  return (
    <AppBar position="static" color="inherit">
      <Toolbar>
        <Link to={location.pathname === "/" ? "/" : "/connect-wallet"} style={{ color: "inherit", textDecoration: "none" }}>
          <Box sx={{ display: "flex", alignItems: "center" }}>
            <Avatar
              alt="Laconic logo"
              src="https://avatars.githubusercontent.com/u/92608123"
            />
            <IconButton
              edge="start"
              color="inherit"
              aria-label="menu"
              sx={{ ml: 2, mr: 2 }}
            >
              Testnet Onboarding
            </IconButton>
          </Box>
        </Link>
      </Toolbar>
    </AppBar>
  );
};

export default Header;