import type { ReactNode } from 'react'
import { cn } from './cn'
import { MONO_CAPTION_CLASSES } from './looks'

/**
 * A keyboard hint — the small chip that names the key which does the same thing.
 *
 * **The look is SearchInput's shortcut chip** (Katerina, 2026-09-05), which is
 * the one the apps already show: an inset pill with a hairline border, and under
 * Signal and Ship the keycap treatment — mono, 10px, a lighter fill and a thicker
 * bottom edge, so it reads as a key rather than a label.
 *
 * It existed before this file did, drawn inline inside `MenuItem` and again
 * inside `SearchInput`. Extracted when `Tooltip` needed a third copy.
 *
 * **Sizes are arbitrary values on purpose.** `text-caption` beside a
 * `text-{color}` is dropped by tailwind-merge, so the chip silently inherited
 * whatever size surrounded it — 10px in a composer, something else elsewhere.
 * `text-[12px]` survives the merge.
 *
 * Content is whatever names the key — a trigger character (`/`, `@`), a chord
 * (`Cmd+B`, `Ctrl+Alt+1`), or a word (`Esc`). It does not format anything: a caller
 * that knows the platform passes the label it wants.
 */
export interface KbdProps {
  children: ReactNode
  className?: string
  /**
   * `tooltip` draws the key in the tooltip's own key colours, for a theme whose
   * tooltip is darker than its page (Katerina, 27 September). `Tooltip` passes it
   * for its shortcut; nothing else needs to.
   */
  tone?: 'default' | 'tooltip'
}

export function Kbd({ children, className, tone = 'default' }: KbdProps) {
  return (
    <kbd
      className={cn(
        'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-border-strong bg-bg-inset px-1 py-px font-sans',
        MONO_CAPTION_CLASSES,
        'signal:border-b-2 signal:pt-[2px] signal:pb-px signal:bg-bg-wash',
        'ship:border-b-2 ship:pt-[2px] ship:pb-px ship:bg-bg-wash ship:font-mono ship:text-small',
        // Leaf sets its keys in mono, as Signal does (Katerina, 28 September): the type, not the key's shape.
        'leaf:font-mono leaf:text-small',
        tone === 'tooltip' && 'border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key',
        className,
      )}
    >
      {children}
    </kbd>
  )
}