import Tex from '../Tex'
import type { Question } from '../../types'

interface Props {
  q: Question
  value: string | null | undefined
  onChange: (val: string) => void
  locked?: boolean
  graded?: boolean
}

export default function MultipleChoice({ q, value, onChange, locked, graded }: Props) {
  return (
    <div className="choices" role="radiogroup">
      {(q.choices ?? []).map((c, i) => {
        const isSelected = value === c.id
        let cls = 'choice'
        if (isSelected) cls += ' selected'
        if (graded) {
          if (c.id === q.answer) cls += ' correct'
          else if (isSelected) cls += ' wrong'
        }
        return (
          <button
            key={c.id}
            className={cls}
            onClick={() => !locked && onChange(c.id)}
            disabled={locked}
            role="radio"
            aria-checked={isSelected}
          >
            <span className="choice-marker" />
            <span className="choice-key">{String.fromCharCode(65 + i)}</span>
            <Tex>{c.text}</Tex>
          </button>
        )
      })}
    </div>
  )
}