import { Link } from 'react-router-dom'

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

import { devices, PAGES } from 'config'
import { isMobileDevice } from 'config/userAgent'
import { client } from 'config/clients'
import { Logo } from 'features/Logo'

import { LogoutButton } from '../LogoutButton'

const HeaderStyled = styled.header`
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 93px;
  justify-content: space-between;

  @media ${devices.tablet} {
    min-height: auto;
  }

  ${isMobileDevice
    ? css`
        padding: 20px 0;
    `
    : ''};
`

export const HeaderLogo = styled(Logo)`
  ${client.styles.userAccountLogo};
  
  ${isMobileDevice
    ? client.styles.mobileHeaderLogo
    : ''};
`

export const Header = () => (
  <HeaderStyled>
    <Link to={PAGES.home}>
      <HeaderLogo />
    </Link>
    <LogoutButton />
  </HeaderStyled>
)
