import React from 'react'

import { ProfileTypes, devices } from 'config'

import { ProfileHeader } from 'features/ProfileHeader'
import { ProfileCard } from 'features/ProfileCard'
import { Matches } from 'features/Matches'
import { UserFavorites } from 'features/UserFavorites'
import { MainWrapper } from 'features/MainWrapper'
import { useMediaQuery } from 'features/MediaQuery'

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

export const PlayerPage = () => {
  const {
    fetchMatches,
    infoItems,
    titleObj,
  } = usePlayerPage()
  const isMobile = useMediaQuery({ query: devices.tablet })

  return (
    <MainWrapper>
      {!isMobile && <UserFavorites />}
      <ProfileHeader />
      <Content>
        <ProfileCard
          profileType={ProfileTypes.PLAYERS}
          titleObj={titleObj}
          infoItems={infoItems}
        />
        <Matches fetch={fetchMatches} />
      </Content>
    </MainWrapper>
  )
}