import styled from 'styled-components/macro'

import { client } from 'config/clients'
import { isMobileDevice } from 'config/userAgent'

type Props = {
  height?: number,
  isMatchPage?: boolean,
  width?: number,
}

export const Logo = styled.div<Props>`
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/images/${client.styles.logo});
  background-position: center;

  width: ${client.styles.logoWidth}rem;
  height: ${client.styles.logoHeight}rem;

  ${isMobileDevice
    ? client.styles.mobileHeaderLogo
    : ''}
`
