import type { Match } from 'helpers'

import { isMobileDevice } from 'config/userAgent'

import { LiveScore } from 'requests/getLiveScores'

import { CardFrontside } from './CardFrontside'
import { CardFrontsideMobile } from './CardFrontside/MatchCardMobile'
import { useCard } from './hooks'

type Props = {
  match: Match,
  score?: LiveScore,
}

export const MatchCard = ({ match, score }: Props) => {
  const {
    isNeedFormatTimeChanged,
    isOwnedMatches,
    onKeyPress,
    onMatchClick,
  } = useCard(match)

  const CurrentComponent = isMobileDevice ? CardFrontsideMobile : CardFrontside

  return (
    <CurrentComponent
      match={match}
      onClick={onMatchClick}
      onKeyPress={onKeyPress}
      isNeedFormatTimeChanged={isNeedFormatTimeChanged}
      isOwnedMatches={isOwnedMatches}
      score={score}
    />
  )
}