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

import { PAGES } from 'config/pages'
import { client } from 'config/clients'

import { Menu } from 'features/Menu'
import { ScoreSwitch } from 'features/MatchSwitches'
import { Search } from 'features/Search'
import { DateFilter } from 'features/HeaderFilters'

import {
  HeaderStyled,
  HeaderGroup,
  HeaderLogo,
  Position,
} from 'features/ProfileHeader/styled'

export const Header = () => (
  <HeaderStyled>
    <Position
      top={client.styles.logoTop}
      left={client.styles.logoLeft}
    >
      <HeaderGroup>
        <Link to={PAGES.home}>
          <HeaderLogo />
        </Link>
        <Search />
      </HeaderGroup>
    </Position>
    <DateFilter />
    <Position right={0.71}>
      <HeaderGroup>
        <ScoreSwitch />
        <Menu />
      </HeaderGroup>
    </Position>
  </HeaderStyled>
)
