import { T9n } from 'features/T9n'
import type { SportsType } from 'features/SportsFilter'

import {
  Arrows,
  ScSportsFilter,
  ScFilterTitle,
} from './styled'

type SportsFilterProps = {
  onModalOpen: () => void,
  open: boolean,
  sport: Array<string>,
  sports: SportsType,
}

export const SelectSport = ({
  onModalOpen,
  open,
  sport,
  sports,
}: SportsFilterProps) => (
  <ScSportsFilter onClick={onModalOpen}>
    <ScFilterTitle opacity={sport[0] === 'all_sports' ? 0.5 : 1}>
      <T9n t={sports[sport[0] as keyof typeof sports]} />
    </ScFilterTitle>
    &nbsp;
    {sport.length > 1 ? `+ ${sport.length - 1}` : ''}
    <Arrows active={open} />
  </ScSportsFilter>
)
