import { AppBar, Button, Stack, Toolbar, Link } from '@mui/material';
import { ReactElement } from 'react';
import { useNavigate } from 'react-router-dom';
import Image from 'components/base/Image';
import logo from 'assets/logo/favicon-logo.png';

const Topbar = (): ReactElement => {
  const navigate = useNavigate();

  const handleSignIn = () => {
    navigate('/authentication/login');
  };

  return (
    <AppBar
      sx={{
        width: '100%',
      }}
    >
      <Toolbar
        sx={{
          p: 3.75,
          justifyContent: 'space-between',
        }}
      >
        <Link href="/">
          <Image src={logo} width={40} height={40} />
        </Link>
        <Stack direction="row" gap={1}>
          <Button variant="contained" onClick={handleSignIn}>
            Sign In
          </Button>
        </Stack>
      </Toolbar>
    </AppBar>
  );
};

export default Topbar;
