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 { useTeamPage } from './hooks'

const TeamPage = () => {
  usePageLogger()
  const {
    fetchMatches,
    headerImage,
    profile,
    teamId,
  } = useTeamPage()

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

export default TeamPage