import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';
import { kbdTheme } from './Kbd.theme.js';

// Key display mapping with proper symbols and labels
const keyMap = {
    command: '⌘',
    shift: '⇧',
    ctrl: '⌃',
    option: '⌥',
    enter: 'Enter',
    delete: 'Delete',
    escape: 'Esc',
    tab: 'Tab',
    capslock: 'Caps Lock',
    up: '↑',
    right: '→',
    down: '↓',
    left: '←',
    pageup: 'Page Up',
    pagedown: 'Page Down',
    home: 'Home',
    end: 'End',
    help: 'Help',
    space: 'Space',
    fn: 'fn',
    win: '⊞',
    alt: 'Alt',
};
/**
 * Kbd component for displaying keyboard keys inline within text or instructions.
 *
 * @component
 * @example
 * ```tsx
 * <Kbd keys={["command", "k"]} />
 * <Kbd keys={["shift", "enter"]} size="sm" />
 * <Kbd>Custom</Kbd>
 * ```
 */
const Kbd = React__default.forwardRef(({ keys, children, size = 'md', className, ...props }, ref) => {
    // Base styles from theme
    const baseStyles = cn(kbdTheme.baseStyle, kbdTheme.sizes[size], className);
    // If both keys and children are provided, combine them in a single kbd
    if (keys && children) {
        return (jsxs("kbd", { ref: ref, className: baseStyles, ...props, children: [keys.map(key => keyMap[key]).join(''), children] }));
    }
    // If only children are provided, render them directly
    if (children) {
        return (jsx("kbd", { ref: ref, className: baseStyles, ...props, children: children }));
    }
    // If no keys are provided, return null
    if (!keys || keys.length === 0) {
        return null;
    }
    // Single key
    if (keys.length === 1) {
        return (jsx("kbd", { ref: ref, className: baseStyles, ...props, children: keyMap[keys[0]] }));
    }
    // Multiple keys - render with separator
    return (jsx("span", { className: "inline-flex items-center gap-1", children: keys.map((key, index) => (jsxs(React__default.Fragment, { children: [jsx("kbd", { ref: index === 0 ? ref : undefined, className: baseStyles, ...props, children: keyMap[key] }), index < keys.length - 1 && (jsx("span", { className: kbdTheme.separatorStyle, children: "+" }))] }, `${key}-${index}`))) }));
});
Kbd.displayName = 'Kbd';

export { Kbd };
