import { Fragment } from 'react'
import type { ReactNode } from 'react'

/**
 * Un texto del catálogo con partes en negrita.
 *
 * Existe porque hay oraciones que necesitan destacar una parte —la ruta exacta
 * dentro de Google, el permiso que hay que elegir— y esa parte **no está en el
 * mismo lugar en todos los idiomas**. Partir la oración en tres claves y pegarlas
 * con JSX obliga a que el orden sea el del inglés; así, cada traducción marca lo
 * suyo donde corresponda:
 *
 *     "Va en *Configuración → Usuarios* con permiso de *propietario*."
 *
 * El asterisco es el marcador y no se puede escapar: si algún día hace falta un
 * asterisco literal en un texto del producto, se resuelve entonces y no ahora
 * con una sintaxis que nadie va a recordar.
 *
 * **No usa `dangerouslySetInnerHTML`.** El catálogo es nuestro, pero una pieza
 * que interpreta marcado es una pieza a la que mañana alguien le pasa algo que
 * no es nuestro.
 */
export function RichText({ text }: { text: string }) {
  const parts = text.split('*')

  return (
    <>
      {parts.map((part, index) => (
        <Fragment key={index}>
          {/* Los índices impares son lo que quedó entre asteriscos. */}
          {index % 2 === 1 ? <strong>{part}</strong> : (part as ReactNode)}
        </Fragment>
      ))}
    </>
  )
}