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

export default function FandStattVer({left, right, title, onNext, radioName = "fst", setbackButton}) {
    const { formData, updateFormData } = useFormData()
    
    // Bestimme das Feld basierend auf radioName
    const fieldName = radioName === 'abgesagt' ? 'abgesagt' : 'stattgefunden'
    const [auswahl, setAuswahl] = useState(formData[fieldName] || '')
    
    const handleRadioChange = (e) => {
        const value = e.target.value
        updateFormData(fieldName, value)
        setAuswahl(value)
        setbackButton(true)
        if(radioName !== 'abgesagt') {
            onNext(value)
        } else {
            onNext()
        }
    }

    return (
        <section>
            <h3>{title}</h3>
            <div className="fstdiv">
                <label className="fsLabel">
                    <input type="radio" name={radioName} value={left} checked={auswahl === left}
                        onChange={handleRadioChange} />
                    {left}
                </label>
                <label className="fsLabel">
                    <input type="radio" name={radioName} value={right} checked={auswahl === right}
                        onChange={handleRadioChange} />
                    {right}
                </label>
            </div>
        </section>
    )
}