import { useName } from 'features/Name'

import { TournamentType } from 'requests/getMatches/types'

import {
  ScSelectFilter,
  ScArrow,
  ScTournamentName,
} from './styled'

type SportsFilterProps = {
  onModalOpen?: () => void,
  open: boolean,
  selectItem: TournamentType | undefined,
  withArrow?: boolean,
}

export const SelectFilter = ({
  onModalOpen,
  open,
  selectItem,
  withArrow,
}: SportsFilterProps) => {
// eslint-disable-next-line
    const tournamentName = selectItem && useName(selectItem)
  return (
    <ScSelectFilter onClick={onModalOpen}>
      <ScTournamentName>{tournamentName}</ScTournamentName>
      {withArrow && (
        <ScArrow refIcon='Arrow' color='#ffffff' direction={open ? 180 : 0} />
      )}
    </ScSelectFilter>
  )
}
