import { MatchInfo } from 'requests'
import { TournamentSubtitle } from 'features/TournamentSubtitle'

import { Wrapper, WrapperTop } from './styled'

import { TeamsDetails } from './components/TeamsDetails'
import { MatchDate } from './components/MatchDate'
import { useMatchPageStore } from '../../store'

type Props = {
  profile: MatchInfo,
}

export const MatchProfileCardMobile = ({ profile }: Props) => {
  const { profileCardShown } = useMatchPageStore()

  if (!profile) return null

  return (
    <Wrapper isHidden={!profileCardShown}>
      <WrapperTop>
        <TeamsDetails profile={profile} teamNameLimit={14} />
        <MatchDate profile={profile} />
      </WrapperTop>
      <TournamentSubtitle countryId={profile!.country_id} tournament={profile!.tournament} />
    </Wrapper>
  )
}