import { MDASH } from 'config'

import { Name } from 'features/Name'
import { useMatchPopupStore } from 'features/MatchPopup'
import { CloseButton } from 'features/PopupComponents'

import { LiveMatchPlaylist } from '../LiveMatchPlaylist'

import {
  Content,
  Header,
  HeaderActions,
  HeaderTitle,
} from './styled'

export const LivePlaylistPage = () => {
  const {
    closePopup,
    match,
  } = useMatchPopupStore()
  if (!match) return null

  const { team1, team2 } = match

  return (
    <Content>
      <Header>
        <HeaderTitle>
          <Name nameObj={team1} />
          {` ${MDASH} `}
          <Name nameObj={team2} />
        </HeaderTitle>

        <HeaderActions>
          <CloseButton
            onClick={closePopup}
            size={12}
          />
        </HeaderActions>
      </Header>

      <LiveMatchPlaylist />
    </Content>
  )
}
