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

import { PAGES } from 'config'

import { ScoreSwitch, AvailableMatchesSwitch } 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 = () => {
  const isMatchPage = useRouteMatch(`/:sportName${PAGES.match}`)
  return (
    <HeaderMobileWrapper>
      <ScoreSwitch />
      {!isMatchPage && <AvailableMatchesSwitch />}
      <Link to={PAGES.home}>
        <Logo width={52} height={12} />
      </Link>
      <HeaderIconsWrapper>
        <IconFavWrapper />
        <Search />
        <Menu />
      </HeaderIconsWrapper>
    </HeaderMobileWrapper>
  )
}