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

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='hide_score' />
        <Icon
          iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'}
          isOn={isScoreHidden}
        />
      </Switch>
    </Wrapper>
  )
}
