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

export default function Spende({ onNext, isCompleted }) {

    const { formData, updateFormData } = useFormData()
    // Initialisiere State mit dem Wert aus formData (falls vorhanden)
    const [spendenArt, setSpendenArt] = useState(formData.spendenArt || '')

    const handleRadioChange = (e) => {
        const art = e.target.value
        setSpendenArt(art)
        updateFormData('spendenArt', art)
        onNext()
    }

    return (
        <section>
            <h3>Eine Spende</h3>
            <div className="radiogroup">
                <label>
                    <input type="radio" name="spende" value="bar"
                        checked={spendenArt === 'bar'} onChange={handleRadioChange} disabled={isCompleted}
                    />
                    ist in bar eingegangen
                </label>
                <label>
                    <input type="radio" name="spende" value="ueber"
                        checked={spendenArt === 'ueber'} onChange={handleRadioChange} disabled={isCompleted}
                    />
                    wird überwiesen
                </label>
                <label>
                    <input type="radio" name="spende" value="kasse"
                        checked={spendenArt === 'kasse'} onChange={handleRadioChange} disabled={isCompleted}
                    />
                    ist in der Spendenkasse
                </label>
                <label>
                    <input type="radio" name="spende" value="not"
                        checked={spendenArt === 'not'} onChange={handleRadioChange} disabled={isCompleted}
                    />
                    ist nicht vorgesehen
                </label>
            </div>
        </section>
    )
}