import React from 'react'
// import { useRouteMatch } from 'react-router-dom'

import { ToggleScore } from 'features/ToggleScore'
import { Logo } from 'features/Logo'
import { Menu } from 'features/Menu'
import { Search } from 'features/Search'
import {
  DateFilter,
  MatchStatusFilter,
} from 'features/HeaderFilters'

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

export const HeaderMobile = () => (
  <HeaderMobileWrapper>
    <HeaderMobileTop>
      <ToggleScore />
      <Logo />
      <HeaderIconsWrapper>
        <IconFavWrapper />
        <Search />
        <Menu />
      </HeaderIconsWrapper>
    </HeaderMobileTop>
    <HeaderMobileMidle>
      <DateFilter />
    </HeaderMobileMidle>
    <HeaderMobileBottom>
      <MatchStatusFilter />
    </HeaderMobileBottom>
  </HeaderMobileWrapper>
)