import { Fragment } from 'react'

import { Background } from 'features/Background'
import { MediaQuery } from 'features/MediaQuery'
import { useMatchPopupStore } from 'features/MatchPopup'

import { LivePlaylistPage } from '../LivePlaylistPage'

import { Modal } from './styled'

export const LiveMatchPopup = () => {
  const {
    closePopup,
    isOpen,
  } = useMatchPopupStore()

  return (
    <Fragment>
      <MediaQuery minDevice='tablet'>
        <Modal
          close={closePopup}
          isOpen={isOpen}
          withCloseButton={false}
        >
          <LivePlaylistPage />
        </Modal>
      </MediaQuery>

      <MediaQuery maxDevice='mobile'>
        <Modal
          isOpen={isOpen}
          withCloseButton={false}
        >
          <Background>
            <LivePlaylistPage />
          </Background>
        </Modal>
      </MediaQuery>
    </Fragment>
  )
}
