import type { RegexDiagnostic } from "../regex/model/diagnostics";

export function DiagnosticsPanel({
  diagnostics,
  onSelect,
}: {
  readonly diagnostics: readonly RegexDiagnostic[];
  readonly onSelect: (diagnostic: RegexDiagnostic) => void;
}) {
  return (
    <section
      className="panel diagnostics-panel"
      aria-labelledby="diagnostics-heading"
    >
      <header className="panel-heading compact">
        <h2 id="diagnostics-heading">Diagnostics</h2>
        <span>{diagnostics.length}</span>
      </header>
      {diagnostics.length === 0 ? (
        <p className="success-state">No current diagnostics.</p>
      ) : (
        <ul className="diagnostic-list">
          {diagnostics.map((diagnostic) => (
            <li key={diagnostic.id}>
              <button
                type="button"
                className={`diagnostic diagnostic-${diagnostic.severity}`}
                onClick={() => onSelect(diagnostic)}
              >
                <span>{diagnostic.severity}</span>
                <strong>{diagnostic.message}</strong>
                <small>
                  {diagnostic.source} · {diagnostic.provenance}
                </small>
              </button>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}
