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

export function Kbd({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <kbd
      className={cn(
        'inline-flex h-5 min-w-5 items-center justify-center rounded border border-line-strong bg-surface-3 px-1.5 font-mono text-[10px] font-medium text-fg-muted',
        className,
      )}
    >
      {children}
    </kbd>
  )
}