import { isMobileDevice } from 'config/userAgent'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import { getSwitchScoreIconName } from 'helpers/getSwitchScoreIconName'

import {
  Switch,
  Title,
  Icon,
  Wrapper,
} from '../../styled'

export const ScoreSwitch = () => {
  const { isScoreHidden, toggleScore } = useMatchSwitchesStore()

  return (
    <Wrapper>
      <Switch
        role='switch'
        onClick={toggleScore}
        aria-checked={!isScoreHidden}
      >
        <Title t={isMobileDevice ? 'scores' : 'hide_score'} />
        <Icon
          iconName={getSwitchScoreIconName()}
          isOn={!isScoreHidden}
        />
      </Switch>
    </Wrapper>
  )
}
