import isEmpty from 'lodash/isEmpty'

import type { Playlists, PlaylistOption } from 'features/MatchPage/types'
import type { MatchInfo } from 'requests'

import { PlayersPlaylists } from '../PlayersPlaylists'

type Props = {
  onSelect: (option: PlaylistOption) => void,
  playlists: Playlists,
  profile: MatchInfo,
  selectedPlaylist?: PlaylistOption,
}

export const TabPlayers = ({
  onSelect,
  playlists,
  profile,
  selectedPlaylist,
}: Props) => {
  if (isEmpty(playlists.players.team1)) return null

  return (
    <PlayersPlaylists
      profile={profile}
      players={playlists.players}
      selectedMathPlaylist={selectedPlaylist}
      onSelect={onSelect}
    />
  )
}
