import { PAGES } from 'config'

import { usePageLogger } from 'hooks/usePageLogger'

import { Matches } from 'features/Matches'
import {
  HeaderFiltersStore,
} from 'features/HeaderFilters'

import {
  PageWrapper,
  Main,
  Content,
} from 'features/PageLayout'
import { UserFavorites } from 'features/UserFavorites'

import { useHomePage } from './hooks'
import { Header } from './components/Header'

const Home = () => {
  usePageLogger(PAGES.home)
  const { fetchMatches } = useHomePage()
  return (
    <PageWrapper>
      <Header />
      <Main>
        <UserFavorites />
        <Content>
          <Matches fetch={fetchMatches} />
        </Content>
      </Main>
    </PageWrapper>
  )
}

const HomePage = () => (
  <HeaderFiltersStore>
    <Home />
  </HeaderFiltersStore>
)

export default HomePage
