import type { Segment } from '@/lib/redaction'
import { de } from '@/lib/i18n/de'

/**
 * Rendert Fliesstext mit Schwärzungen.
 *
 * Die Segmente kommen fertig vom Server: der geschwärzte Inhalt ist gar nicht
 * erst im Dokument. Der Balken bekommt seine Breite aus der gerundeten Länge,
 * nicht aus dem echten Text.
 *
 * Der Wischeffekt beim ersten Erscheinen steckt in der Klasse `.redaction`
 * (siehe app/globals.css) und respektiert prefers-reduced-motion.
 */
export function RedactedText({ segments }: { segments: Segment[] }) {
  return (
    <p className="max-w-(--container-measure) text-sm whitespace-pre-wrap">
      {segments.map((segment, index) =>
        segment.kind === 'text' ? (
          <span key={index}>{segment.text}</span>
        ) : (
          <span key={index} className="inline-flex items-baseline gap-1.5 align-baseline">
            <span
              className="redaction"
              style={{ width: `${segment.blockLength}ch` }}
              aria-label={de.section.redactedFrom(segment.requiredLevel)}
            >
              {' '}
            </span>
            <span className="font-mono text-2xs text-text-dim" aria-hidden>
              {segment.requiredLevel}
            </span>
          </span>
        ),
      )}
    </p>
  )
}