import { useState } from 'react'

function FandStattVer({ left, right, onNext, isCompleted }) {
  const [auswahl, setAuswahl] = useState('')

  const handleOK = () => {
    if (auswahl) {
      // Rufe onNext mit der Auswahl ('ja' oder 'nein') auf
      onNext(auswahl)
    } else {
      alert('Bitte eine Option auswählen')
    }
  }

  return (
    <div className={`component-box ${isCompleted ? 'completed' : ''}`}>
      <h3>Fand die Veranstaltung statt?</h3>
      
      <div className="radio-group">
        <label>
          <input
            type="radio"
            name="fandstatt"
            value={left}
            checked={auswahl === left}
            onChange={(e) => setAuswahl(e.target.value)}
            disabled={isCompleted}
          />
          {left}
        </label>
        
        <label>
          <input
            type="radio"
            name="fandstatt"
            value={right}
            checked={auswahl === right}
            onChange={(e) => setAuswahl(e.target.value)}
            disabled={isCompleted}
          />
          {right}
        </label>
      </div>

      {!isCompleted && (
        <button onClick={handleOK} disabled={!auswahl}>
          OK
        </button>
      )}
      
    </div>
  )
}

export default FandStattVer