import React from 'react';
import {
  Typography,
  Avatar,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';

import 'components/layout/Header.css';

const BackstoryLogo = () => {
  const theme = useTheme();
  return <Typography
    variant="h6"
    className="BackstoryLogo"
    noWrap
    sx={{
      cursor: "pointer",
      fontWeight: 700,
      letterSpacing: '.2rem',
      color: theme.palette.primary.contrastText,
      textDecoration: 'none',
      display: "flex", 
      flexDirection: "row", 
      alignItems: "center", 
      gap: 1, 
      textTransform: "uppercase",
    }}
  >
    <Avatar sx={{ width: 24, height: 24 }}
      variant="rounded"
      alt="Backstory logo"
      src="/logo192.png" />
    Backstory
  </Typography>
};


export { BackstoryLogo };