import type { ReactNode } from 'react'
import { cn } from '../cn.ts'

interface Props {
  children: ReactNode
  /** Changes its color or how it fits the line, such as cutting a long DID short. */
  className?: string
}

/**
 * Code inside a line of text outside a reply, such as a model ID, a package, or a role's name, in
 * monospace a step smaller than the text around it, as in a reply, but never under the caption
 * size, since it often sits in details that are already small.
 */
export function Code(props: Props) {
  return (
    <code
      className={cn(
        'font-mono text-[length:max(var(--text-caption),var(--text-code))]',
        props.className,
      )}
    >
      {props.children}
    </code>
  )
}