import * as React from 'react'

import { cn } from './utils'

interface KbdProps extends React.ComponentProps<'span'> {
  /** Array of key labels to display (joined with '+' separators) */
  keys?: string[]
}

function Kbd({ className, keys, children, ...props }: KbdProps) {
  return (
    <span data-slot="kbd" className={cn('inline-flex items-center gap-0.5', className)} {...props}>
      {keys
        ? keys.map((key, index) => (
            <React.Fragment key={index}>
              {index > 0 && <span className="text-foreground-muted text-xs">+</span>}
              <kbd
                className={cn(
                  'border-border-glass bg-glass text-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-md border px-1.5 text-xs font-medium backdrop-blur-[20px]',
                  'font-mono shadow-sm'
                )}
              >
                {key}
              </kbd>
            </React.Fragment>
          ))
        : children}
    </span>
  )
}

export { Kbd }
export type { KbdProps }
