import { usePageLogger } from 'hooks/usePageLogger'

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

import { usePlayerPage } from './hooks'

const PlayerPage = () => {
  usePageLogger()
  const {
    fetchMatches,
    profile,
    teamId,
  } = usePlayerPage()

  return (
    <PageWrapper>
      <ProfileHeader profileId={teamId}>
        {profile && <ProfileCard profile={profile} />}
      </ProfileHeader>
      <Main>
        <UserFavorites />
        <Content>
          <Matches fetch={fetchMatches} />
        </Content>
      </Main>
    </PageWrapper>
  )
}

export default PlayerPage