'use client'

import './resolution-choice.css'

export default function ResolutionChoice({ title, busy, onAnswer }: {
  title: string; busy: boolean; onAnswer: (resolved: boolean) => void
}) {
  return <section className="resolution-choice" aria-labelledby="resolution-question" aria-busy={busy}>
    <span className="section-kicker">Your answer is needed</span>
    <h2 id="resolution-question">Is it fixed?</h2>
    <p>{title}</p>
    <p>Try the affected content in Grizzlyflix, then choose:</p>
    <div className="resolution-choice-buttons">
      <button id="yes" type="button" className="resolution-yes" disabled={busy} onClick={() => onAnswer(true)}><strong>YES</strong><span>It works — close this issue</span></button>
      <button id="no" type="button" className="resolution-no" disabled={busy} onClick={() => onAnswer(false)}><strong>NO</strong><span>Still broken — keep it open</span></button>
    </div>
    {busy && <p role="status">Saving your answer…</p>}
  </section>
}