import React, { Fragment } from 'react'

import { ProfileTypes } from 'config'

import { ProfileHeader } from 'features/ProfileHeader'
import { ProfileCard } from 'features/ProfileCard'
import { Matches } from 'features/Matches'

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

export const PlayerPage = () => {
  const {
    fetchMatches,
    infoItems,
    titleObj,
  } = usePlayerPage()

  return (
    <Fragment>
      <ProfileHeader />
      <Content>
        <ProfileCard
          profileType={ProfileTypes.PLAYERS}
          titleObj={titleObj}
          infoItems={infoItems}
        />
        <Matches fetch={fetchMatches} />
      </Content>
    </Fragment>
  )
}