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

import { PAGES } from 'config'

import { ScoreSwitch } from 'features/MatchSwitches'
import { Logo } from 'features/Logo'
import { Menu } from 'features/Menu'
import { Search } from 'features/Search'

import {
  HeaderMobileWrapper,
  HeaderIconsWrapper,
  IconFavWrapper,
} from './styled'

export const HeaderMobile = () => (
  <HeaderMobileWrapper>
    <ScoreSwitch />
    <Link to={PAGES.home}>
      <Logo width={52} height={12} />
    </Link>
    <HeaderIconsWrapper>
      <IconFavWrapper />
      <Search />
      <Menu />
    </HeaderIconsWrapper>
  </HeaderMobileWrapper>
)
