import { RichText } from '@/components/RichText'
import { t } from '@/lib/i18n'
import { cn } from '@/lib/utils'

interface Props {
  example: Record<string, string>
  highlights: string[]
}

/**
 * El archivo de clave, tal como se ve, con los campos que hay que reconocer.
 *
 * Es la pieza que decide si alguien que nunca entró a Google Cloud puede
 * avanzar solo. Describir el archivo con palabras —«el .json de la cuenta de
 * servicio»— no alcanza: en la misma pantalla de Google hay tres archivos que
 * se parecen, y la única forma de distinguirlos es mirando adentro.
 *
 * El ejemplo es inventado y no contiene material secreto: el bloque de clave
 * privada está reemplazado por un texto evidentemente falso.
 */
export function KeyFileExample({ example, highlights }: Props) {
  return (
    <figure className="space-y-2">
      <figcaption className="text-muted-foreground text-sm">{t('keyFile.example')}</figcaption>

      <pre className="border-border bg-muted/40 overflow-x-auto rounded-lg border p-4 text-xs leading-relaxed">
        <code>
          {'{\n'}
          {Object.entries(example).map(([key, value], index, fields) => {
            const highlighted = highlights.includes(key)
            return (
              <span
                key={key}
                className={cn(
                  'block',
                  highlighted ? 'bg-primary/10 -mx-1 rounded px-1 font-medium' : 'opacity-60'
                )}
              >
                {'  "'}
                {key}
                {'": '}
                {JSON.stringify(value)}
                {/*
                  Sin coma en el último campo: esto se muestra para comparar,
                  campo por campo, contra un archivo real. Un JSON que no sería
                  válido invita a buscar la diferencia donde no la hay.
                */}
                {index < fields.length - 1 ? ',' : ''}
              </span>
            )
          })}
          {'}'}
        </code>
      </pre>

      <p className="text-muted-foreground text-xs">
        <RichText text={t('keyFile.secret')} />
      </p>
    </figure>
  )
}