/**
 * TranscriptDisplay.jsx
 * Shows the live and final transcription output.
 *
 * During streaming:
 *   - `stable`   text is rendered normally
 *   - `unstable` text is rendered dimmed/italic (LocalAgreement-2 unconfirmed prefix)
 *
 * Props:
 *   stable   {string}  – confirmed transcript text
 *   unstable {string}  – pending / unconfirmed suffix
 *   loading  {bool}    – show a spinner while waiting for the first token
 *   mode     {string}  – 'webgpu' | 'server'
 */

export default function TranscriptDisplay({ stable, unstable, loading, mode }) {
  const isEmpty = !stable && !unstable && !loading;

  return (
    <div className="transcript-display">
      <div className="transcript-header">
        <span className="transcript-title">Transcript</span>
      </div>

      <div className="transcript-body transcript-output" aria-live="polite" aria-label="Transcription output">
        {loading && !stable && !unstable && (
          <span className="transcript-loading">
            <span className="spinner" aria-hidden="true" />
            Waiting for first token…
          </span>
        )}

        {isEmpty && !loading && (
          <span className="transcript-placeholder">
            Transcription will appear here after you submit audio.
          </span>
        )}

        {/* Stable (confirmed) text */}
        {stable && <span className="transcript-stable">{stable}</span>}

        {/* Unstable (unconfirmed) text – LocalAgreement-2 pending prefix */}
        {unstable && (
          <span
            className="transcript-unstable"
            title="Partial hypothesis – not yet confirmed by LocalAgreement-2"
          >
            {unstable}
          </span>
        )}
      </div>
    </div>
  );
}