import { useState } from 'react'
import { useFormData } from '../FormContext'

export default function FandStattVer({left, right, onNext}) {
    const { formData, updateFormData } = useFormData()
    const [auswahl, setAuswahl] = useState(formData.stattgefunden || '')
    const handleOK = () => {
        if(!auswahl) {
            alert('Bitte ja/nein wählen')
            return
        }
        updateFormData('stattgefunden', auswahl)
        onNext(auswahl)
    }

    return (
        <section>
            <h3>Fand die Führung statt?</h3>
            <div className="fstdiv">
                <label className="fsLabel">
                    <input type="radio" name="fst" value={left} checked={auswahl === left}
                        onChange = {(e) => setAuswahl(e.target.value)} />
                    {left}
                </label>
                <label className="fsLabel">
                    <input type="radio" name="fst" value={right} checked={auswahl === right}
                        onChange = {(e) => setAuswahl(e.target.value)} />
                    {right}
                </label>
                <button className="okbutton"  onClick={handleOK} disabled = {!auswahl}>OK</button>
            </div>
        </section>
    )
}