import { getUser } from '@/api/user/query';
import { STALE_TIME } from '@/constants/request';
import { min } from '@/styles/mq';
import { useQuery } from '@tanstack/react-query';
import styled from 'styled-components';
import { Flex } from 'ui/grid';

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

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

function User() {
  const { data: user } = useQuery(['user'], ({ signal }) => getUser({ signal }), {
    staleTime: STALE_TIME,
  });

  return <UserText>{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;
  margin-top: 4px;

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

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

export default Auth;