ContentReportModal

export function ContentReportSpecimen() {
  const [abierto, setAbierto] = useState(false)
  const [enviando, setEnviando] = useState(false)
  const [ultimoReporte, setUltimoReporte] = useState<string | null>(null)

  return (
    <Stage label="ContentReportModal · el reporte de una flashcard de PrepChat" tall>
      <div className="flex w-full max-w-[400px] flex-col items-center gap-2 px-1 py-1">
        <Button variant="secondary" size="sm" icon={IconWrench} onClick={() => setAbierto(true)}>
          Report issue with this card
        </Button>
        {ultimoReporte && <p className="text-[11px] text-content/60">enviado: {ultimoReporte}</p>}
        <p className="text-center text-[11px] text-content/60">
          El primero de `options` queda elegido de entrada: el orden decide qué se reporta cuando el
          usuario no toca nada.
        </p>
      </div>

      <ContentReportModal
        isOpen={abierto}
        onClose={() => setAbierto(false)}
        title="Report issue with this card"
        isPending={enviando}
        options={[
          { value: 'incorrect', label: 'Answer looks wrong' },
          { value: 'outdated', label: 'Law has changed' },
          { value: 'typo', label: 'Typo or formatting issue' },
          { value: 'confusing', label: 'Wording is unclear' },
          { value: 'other', label: 'Something else' },
        ]}
        onSubmit={(data) => {
          setEnviando(true)
          setTimeout(() => {
            setEnviando(false)
            setAbierto(false)
            setUltimoReporte(data.note ? `${data.issueType} — «${data.note}»` : data.issueType)
          }, 700)
        }}
      />
    </Stage>
  )
}

De specimens/display.tsx · ContentReportSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.