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

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

export default function ShortAnswer({ q, value = '', onChange, locked }: Props) {
  return (
    <div className="answer-input-wrap">
      <input
        className="input"
        type="text"
        value={value ?? ''}
        onChange={(e) => onChange(e.target.value)}
        placeholder="Type your answer…"
        disabled={locked}
        autoComplete="off"
        spellCheck={q.type === 'translation'}
      />
      {q.type === 'translation' && q.targetLanguage && (
        <div className="faint mono" style={{ fontSize: 11 }}>
          Answer in {q.targetLanguage}
        </div>
      )}
    </div>
  )
}