/* 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;
  * {
    font-size: 0.7rem;
  }
`;

const { COLOR_PRIMARY } = getColors();

const UnlimitedTag = observer(() => {
  const { $process } = useStore();
  if ($process.has('Unlimited')) {
    return (
      <TagWrapper>
        <Tag color={COLOR_PRIMARY} style={{ margin: '0 5px' }}>
          без ограничений
        </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 justifyContent="space-between" alignItems="center">
        <LogoText>Лизинговый Калькулятор</LogoText>
        <UnlimitedTag />
      </Flex>
    </Flex>
  );
}

export default Logo;
