/* eslint-disable react/forbid-component-props */
import styles from './Logo.module.css';
import { useStore } from '@/stores/hooks';
import getColors from '@/styles/colors';
import { min } from '@/styles/mq';
import { observer } from 'mobx-react-lite';
import Image from 'next/image';
import Link from 'next/link';
import logo from 'public/assets/images/logo-primary.svg';
import styled from 'styled-components';
import { Tag } from 'ui/elements';
import { Flex } from 'ui/grid';

const ImageWrapper = styled.div`
  width: 100px;

  ${min('laptop')} {
    width: 135px;
  }
`;

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;
  }
`;

const TagWrapper = styled.div`
  font-family: 'Montserrat';
  font-weight: 500;

  ${min('tablet')} {
    margin: 0 5px;
  }
`;

const { COLOR_PRIMARY } = getColors();

const UnlimitedTag = observer(() => {
  const { $process } = useStore();

  if ($process.has('Unlimited')) {
    return (
      <TagWrapper>
        <Tag color={COLOR_PRIMARY}>без ограничений</Tag>
      </TagWrapper>
    );
  }

  return false;
});

function Logo() {
  return (
    <Flex flexDirection="column" alignItems="flex-start" justifyContent="space-between">
      <ImageWrapper>
        <Link href="/">
          <Image priority className={styles.logo} alt="logo" src={logo} layout="responsive" />
        </Link>
      </ImageWrapper>
      <Flex flexDirection={['column', 'row']} alignItems={[undefined, 'center']}>
        <LogoText>Лизинговый Калькулятор</LogoText>
        <UnlimitedTag />
      </Flex>
    </Flex>
  );
}

export default Logo;