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

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

import { devices, PAGES } from 'config'
import { isMobileDevice } from 'config/userAgent'

import { HeaderGroup } from 'features/ProfileHeader/styled'

import { Logo } from 'features/Logo'

const HeaderStyled = styled.header`
  display: flex;
  align-items: center;
  margin-bottom: 65px;

  @media ${devices.tablet} {
    margin-bottom: 0;
  }

  ${isMobileDevice
    ? css`
      justify-content: center;
      @media (max-width: 650px){
        margin-bottom: 20px;
      }
      @media (orientation: landscape){
        margin-bottom: 20px;
      }
    `
    : ''};
`
const CustomHeaderGroup = styled(HeaderGroup)`
  width: 100%;
  justify-content: space-between;
`

const HomeIcon = styled.div`
  display: block;
  width: 30px;
  height:30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/images/home.png);
`

export const Header = () => (
  <HeaderStyled>
    <CustomHeaderGroup>
      <Link to={PAGES.home}>
        <Logo />
      </Link>
      <Link to={PAGES.home}>
        <HomeIcon />
      </Link>
    </CustomHeaderGroup>
  </HeaderStyled>
)