import React from 'react'

import { ProfileTypes } from 'config'

import { ProfileHeader } from 'features/ProfileHeader'
import { ProfileCard } from 'features/ProfileCard'
import { Matches } from 'features/Matches'
import { MainWrapper } from 'features/MainWrapper'
import { UserFavorites } from 'features/UserFavorites'
import { MediaQuery } from 'features/MediaQuery'

import { useTournamentPage } from './hooks'
import { Content } from './styled'

export const TournamentPage = () => {
  const {
    fetchMatches,
    infoItems,
    titleObj,
  } = useTournamentPage()

  return (
    <MainWrapper>
      <MediaQuery minDevice='laptop'>
        <UserFavorites />
      </MediaQuery>
      <ProfileHeader />
      <Content>
        <ProfileCard
          profileType={ProfileTypes.TOURNAMENTS}
          titleObj={titleObj}
          infoItems={infoItems}
        />
        <Matches fetch={fetchMatches} />
      </Content>
    </MainWrapper>
  )
}