import { jsx } from 'react/jsx-runtime';
import { cn } from '../../../lib/utils.mjs';
import { getShortcutKey } from '../utils.mjs';

const ShortcutKey = ({
  ref,
  className,
  keys,
  ...props
}) => {
  const modifiedKeys = keys.map((key) => getShortcutKey(key));
  const ariaLabel = modifiedKeys.map((shortcut) => shortcut.readable).join(" + ");
  return /* @__PURE__ */ jsx(
    "span",
    {
      "aria-label": ariaLabel,
      className: cn("inline-flex items-center gap-0.5", className),
      ...props,
      ref,
      children: modifiedKeys.map((shortcut) => /* @__PURE__ */ jsx(
        "kbd",
        {
          className: cn(
            "inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium text-[rgb(156,157,160)] capitalize",
            className
          ),
          ...props,
          ref,
          children: shortcut.symbol
        },
        shortcut.symbol
      ))
    }
  );
};
ShortcutKey.displayName = "ShortcutKey";

export { ShortcutKey };
