import styled, { css } from 'styled-components/macro'

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

import { Logo } from 'features/Logo'

type Props = {
  height?: number,
  marginTop?: number,
}

export const HeaderGroup = styled.div<Props>`
  display: flex;
  flex-direction: row;
  align-items: center;

  ${({ height }) => (height ? `height: ${height}rem` : '')};
  ${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};

  ${isMobileDevice
    ? css`
      position: relative;
      justify-content: space-between;

      :only-child {
        flex-basis: 100px;
      }
    `
    : ''};
`

export const HeaderLogo = styled(Logo)`
  ${({ isMatchPage }) => (isMatchPage ? css`
    width: ${client.styles.matchLogoWidth}rem;
    height: ${client.styles.matchLogoHeight}rem;
  ` : '')}

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