import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { useTheme } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  logo: {
    display: 'flex',
    alignItems: 'center',
    height: '100%',
    padding: theme.spacing(1, 2),
  },
  logoText: {
    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
    fontSize: '1.5rem',
    fontWeight: 700,
    color: theme.palette.primary.main,
    textDecoration: 'none',
    letterSpacing: '-0.02em',
  },
  logoIcon: {
    marginRight: theme.spacing(1),
    fontSize: '1.75rem',
  },
}));

export const LogoFull = () => {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <div className={classes.logo}>
      <span className={classes.logoIcon}>📦</span>
      <span className={classes.logoText}>
        container.mom
      </span>
    </div>
  );
};

export default LogoFull;