// @ts-nocheck
import styled from 'styled-components'
import logoImg from '../assets/images/logo.png'
import colorLogoImg from '../assets/images/logo_color.png'
import clsx from 'clsx'

export default function Logo (props) {
  const { active = false } = props

  return (<Wrapper>
    <Image className={clsx({ active: active })} image={ active ? colorLogoImg : logoImg} />
    <TitleWrap>
      <Title type='main'>SWLab</Title>
      <Title type='sub'>Bankware Global</Title>
    </TitleWrap>
  </Wrapper>)
}

const Image = styled.div`
    margin-top: 10px;
    margin-right: 6px;
    width: 35px;
    height: 44px;
    background-image: url(${props => props.image});
    background-size: contain;
    background-repeat: no-repeat;

    &.active {
      width: 52px;
      height: 52px;
    }
`
const Wrapper = styled.div`
    display: flex;
    align-items: center;
    flex-grow: 1;
    width: 300px;
    height: 60px;
    margin-top: -8px;
`
const TitleWrap = styled.div`
    display: flex;
    flex-direction: column;
`
const Title = styled.span`
    font-size: ${(props) => (props.type === 'main' ? '33px' : '14px')};
    font-weight: ${(props) => (props.type === 'main' ? 600 : 400)};
    margin-top: ${(props) => (props.type !== 'main' && '-4px')}
`