header.tsx

import React from 'react'
import styled from 'styled-components/macro'
import { useTranslation } from 'react-i18next'
import LogoBar from '../../components/logobars/LogoBar'
import LanguageSelector from '../../components/languageselector'


const MainWrapper = styled.div`
  color: ${({ theme }) => theme.page.headerColor};
  background-color: ${({ theme }) => theme.page.headerBackgroundColor};
`

const Main = styled.div`
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: ${props => props.theme.appMaxWidth};
  padding: ${props => `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
`

const Menu = styled.ul`
  list-style-type: none;
`

const MenuItem = styled.div`
  font-size: 1rem;
  display: inline;
`

const TitleBox = styled.div`
  display: flex;
  flex-direction: column;
  padding-left: 3rem;
`

const ShortTitle = styled.div`
  font-size: 2rem;
`

const LongTitle = styled.div`
  font-size: 1rem;
`

function Header() {
  const { t } = useTranslation('common')

  return (
    <header>
      <LogoBar />
      <MainWrapper>
        <Main>
          <TitleBox>
            <ShortTitle>{t('header.applicationTitleShort')}</ShortTitle>
            <LongTitle>{t('header.applicationTitleLong')}</LongTitle>
          </TitleBox>
          <Menu>
            <MenuItem>
              <LanguageSelector/>
            </MenuItem>
          </Menu>
        </Main>
      </MainWrapper>
    </header>
  )
}

export default Header