import { useId } from 'react';

import { useFokusBeimAufbau } from '../../hooks/useFokusBeimAufbau';
import type { ErgebnisArt } from '../../lernen/bewertung';

export interface ErgebnisbereichProps {
  readonly art: ErgebnisArt;
  readonly symbol: string;
  readonly titel: string;
  readonly children: React.ReactNode;
}

/**
 * Ergebnis einer Frage.
 *
 * Der Bereich übernimmt nach dem Bestätigen den Fokus – damit steht die
 * Tastaturbedienung an einer festen, sinnvollen Stelle statt auf `<body>`.
 * Die Kurzfassung geht zusätzlich über die Live-Region der Sitzung heraus.
 */
export function Ergebnisbereich({
  art,
  symbol,
  titel,
  children,
}: ErgebnisbereichProps): React.JSX.Element {
  const bereichRef = useFokusBeimAufbau<HTMLDivElement>();
  const titelId = useId();

  return (
    <div
      className={`ergebnis ergebnis--${art}`}
      ref={bereichRef}
      tabIndex={-1}
      role="group"
      aria-labelledby={titelId}
    >
      {/* h2, weil die Frage seit dem Umbau die h1 der Ansicht ist. */}
      <h2 className="ergebnis__titel" id={titelId}>
        <span className="ergebnis__symbol" aria-hidden="true">
          {symbol}
        </span>
        {titel}
      </h2>
      {children}
    </div>
  );
}
