import React from 'react'

import { Menu } from 'features/Menu'
import { LanguageSelect } from 'features/LanguageSelect'
import { ToggleScore } from 'features/ToggleScore'
import { Search } from 'features/Search'
import {
  DateFilter,
  MatchStatusFilter,
  SportTypeFilter,
  TournamentFilter,
} from 'features/HeaderFilters'

import {
  HeaderStyled,
  HeaderGroup,
  FilterWrapper,
  SearchWrapper,
  SportFilterWrapper,
  MenuWrapper,
} from 'features/ProfileHeader/styled'

export const Header = () => (
  <HeaderStyled>
    <HeaderGroup>
      <SearchWrapper>
        <Search />
      </SearchWrapper>

      <FilterWrapper>
        <DateFilter />
      </FilterWrapper>

      <FilterWrapper>
        <MatchStatusFilter />
      </FilterWrapper>

      <SportFilterWrapper>
        <SportTypeFilter />
        <TournamentFilter />
      </SportFilterWrapper>
    </HeaderGroup>

    <HeaderGroup>
      <ToggleScore />
      <MenuWrapper>
        <Menu />
      </MenuWrapper>
      <LanguageSelect />
    </HeaderGroup>
  </HeaderStyled>
)