import { ProfileHeader } from 'features/ProfileHeader'
import { MainWrapper } from 'features/MainWrapper'
import { UserFavorites } from 'features/UserFavorites'
import { MediaQuery } from 'features/MediaQuery'

import { FinishedMatch } from './components/FinishedMatch'
import { LiveMatch } from './components/LiveMatch'
import { useMatchProfile } from './hooks/useMatchProfile'
import { Wrapper } from './styled'

const MatchPage = () => {
  const profile = useMatchProfile()
  const isLiveMatch = !profile?.calc

  return (
    <MainWrapper>
      <MediaQuery minDevice='laptop'>
        <UserFavorites />
      </MediaQuery>
      <ProfileHeader />
      <Wrapper>
        {(isLiveMatch && profile) && <LiveMatch profile={profile} />}
        {(!isLiveMatch && profile) && <FinishedMatch profile={profile} />}
      </Wrapper>
    </MainWrapper>
  )
}

export default MatchPage