import React, { Fragment } from 'react'

import { ProfileTypes } from 'config'

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

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

export const TeamPage = () => {
  const {
    infoItems,
    name,
    requestArgs,
  } = useTeamPage()

  return (
    <Fragment>
      <Content>
        <ProfileCard
          profileType={ProfileTypes.TEAMS}
          name={name}
          infoItems={infoItems}
        />
        <Matches requestArgs={requestArgs} />
      </Content>
    </Fragment>
  )
}