import React from 'react'

import type { Match } from 'features/Matches'

import { useCard } from '../hooks'
import { MatchInfoCard } from '../MatchInfoCard'
import { CardLiveHover } from '../CardLiveHover'

type CardLiveProps = {
  match: Match,
  showSportName?: boolean,
}

export const CardLive = ({
  match,
  showSportName,
}: CardLiveProps) => {
  const {
    close,
    flipCard,
    isOpen,
    onKeyPress,
  } = useCard(match.hasVideo)

  if (isOpen) {
    return (
      <CardLiveHover
        match={match}
        onClose={close}
      />
    )
  }

  return (
    <MatchInfoCard
      match={match}
      showSportName={showSportName}
      onClick={flipCard}
      onKeyPress={onKeyPress}
    />
  )
}