import { CopyButton } from '@/components/CopyButton'
import { cn } from '@/lib/utils'

interface Props {
  /** El valor literal: una URI de propiedad, un prefijo de clave, un hostname. */
  value: string
  /** Agrega el botón de copiar al lado. Para lo que alguien va a querer pegar en otro lado. */
  copy?: boolean
  className?: string
}

/**
 * Un valor literal que se lee tal cual y se pega tal cual.
 *
 * Había cinco `<code>` con cuatro juegos de clases distintos entre sólo dos
 * archivos: el mismo `property_uri` se veía de tres maneras según en qué
 * pantalla apareciera, y en una de ellas ni siquiera era seleccionable de un
 * tirón.
 *
 * `translate="no"` no es un detalle: un traductor automático que le cambie una
 * letra a `sc-domain:ejemplo.com` deja a la persona pegando un identificador que
 * no existe, sin ninguna señal de que pasó algo. Por eso viaja con la pieza y no
 * queda a criterio de cada llamador.
 *
 * **El tope de ancho y el recorte van después de `className`, así que un
 * llamador no los puede sacar.** Es deliberado: casi todos estos valores son
 * URLs, y una sola dirección larga estira el contenedor que la tenga —una celda,
 * una tarjeta, un panel— y empuja fuera de la vista lo que esté al lado. El
 * valor entero sigue estando en `title` y en el botón de copiar, que es como se
 * lo lleva quien lo necesita completo.
 */
export function CodeChip({ value, copy = false, className }: Props) {
  const chip = (
    <code
      translate="no"
      title={value}
      className={cn(
        'bg-muted/60 block rounded px-2 py-1 font-mono text-sm',
        className,
        // Van últimas y no primeras: `twMerge` deja ganar a la última, así que
        // ésta es la forma de que el llamador no las pise.
        'max-w-100 truncate'
      )}
    >
      {value}
    </code>
  )

  if (!copy) return chip

  return (
    <span className="inline-flex min-w-0 flex-wrap items-center gap-2">
      {chip}
      {/* Sin rótulo: al lado de un valor que ya ocupa el renglón, la palabra
          «Copiar» compite con el dato que se vino a leer. El globo la dice. */}
      <CopyButton value={value} />
    </span>
  )
}