import type { Match } from 'features/Matches'

import { isMobileDevice } from 'config/userAgent'

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

type Props = {
  match: Match,
}

export const MatchCard = ({ match }: 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}
    />
  )
}