import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/hooks';
import styled from 'styled-components';
import { Flex } from 'UIKit/grid';
import { min } from 'UIKit/mq';

const UserText = styled.span`
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.5rem;
  font-family: 'Montserrat';
  font-weight: 500;

  ${min('laptop')} {
    font-size: 0.75rem;
  }
`;

const User = observer(() => {
  const { $user } = useStore();

  return <UserText>{$user?.user?.displayName}</UserText>;
});

const Logout = styled.a`
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.45rem;
  font-family: 'Montserrat';
  font-weight: 500;

  ${min('laptop')} {
    font-size: 0.55rem;
  }
`;

function Auth() {
  return (
    <Flex
      flexDirection="column"
      alignItems="flex-end"
      alignSelf={['flex-start']}
      justifyContent="space-between"
      height="100%"
    >
      <User />
      <Logout href="/logout">Выход</Logout>
    </Flex>
  );
}

export default Auth;