import React, { Fragment } from 'react'

import { ProfileTypes } from 'config'
import { UserFavorites } from 'features/UserFavorites'
import { ProfileCard } from 'features/ProfileCard'
import { Matches } from 'features/Matches'

import { usePlayerPage } from './hooks'

export const PlayerPage = () => {
  const {
    infoItems,
    matches,
    name,
  } = usePlayerPage()

  return (
    <Fragment>
      <UserFavorites />
      <ProfileCard
        profileType={ProfileTypes.PLAYERS}
        name={name}
        infoItems={infoItems}
      />
      <Matches matches={matches} />
    </Fragment>
  )
}