"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>
  );
}