import React from 'react'

import { ProfileTypes } from 'config'

import { UserFavorites } from 'features/UserFavorites'
import { ProfileCard } from 'features/ProfileCard'
import { Matches } from 'features/Matches'
import { UserFavoritesStore } from 'features/UserFavorites/store'

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

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

  return (
    <UserFavoritesStore>
      <UserFavorites />
      <Content>
        <ProfileCard
          profileType={ProfileTypes.TOURNAMENTS}
          name={name}
          infoItems={infoItems}
        />
        <Matches />
      </Content>
    </UserFavoritesStore>
  )
}