import Image from 'next/image';
import logo from 'public/assets/images/logo-primary.svg';
import styled from 'styled-components';
import { Flex } from 'ui/grid';
import { min } from 'ui/mq';

const ImageWrapper = styled.div`
  width: 100px;
  ${min('laptop')} {
    width: 135px;
  }

  img {
    filter: brightness(0) invert(1);
  }
`;

const LogoText = styled.h3`
  margin: 0;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.85rem;
  font-family: 'Montserrat';
  font-weight: 500;
  ${min('laptop')} {
    font-size: 1.2rem;
  }
`;

function Logo() {
  return (
    <Flex flexDirection="column" alignItems="flex-start" justifyContent="space-between">
      <ImageWrapper>
        <Image alt="logo" src={logo} layout="responsive" objectFit="contain" />
      </ImageWrapper>
      <LogoText>Лизинговый Калькулятор</LogoText>
    </Flex>
  );
}

export default Logo;
