import colors from 'client/UIKit/colors';
import { Flex } from 'client/UIKit/grid';
import mq from 'client/UIKit/mq';
import styled from 'styled-components';

const LOGO_NAME = 'logo-1line-AL-white-h100-short.png';

const Image = styled.img`
  height: 1.2rem;

  ${mq.laptop`
    height: 1.5rem 
  `}
`;

const LogoText = styled.h3`
  margin: 0;
  margin-top: -3px;
  text-transform: uppercase;
  color: ${colors.WHITE[0]};
  font-size: 0.95rem;
  font-family: 'Montserrat';
  font-weight: 500;
  ${mq.laptop`
  font-size: 1.2rem;
  margin-top: -2px;
`}
`;

export default () => (
  <Flex flexDirection="column" alignItems="flex-start">
    <Image alt="logo" src={process.env.PUBLIC_URL + LOGO_NAME} />
    <LogoText>Лизинговый Калькулятор</LogoText>
  </Flex>
);
