const ddKbdCss = `
.dd-kbd {
  display: inline-block; background: var(--surface-2);
  border: 1px solid var(--border-2); border-bottom-width: 2px;
  border-radius: var(--radius-xs); padding: 1px 7px;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-1);
  line-height: 1.5;
}
`;

if (typeof document !== 'undefined' && !document.getElementById('dd-kbd-css')) {
  const s = document.createElement('style');
  s.id = 'dd-kbd-css';
  s.textContent = ddKbdCss;
  document.head.appendChild(s);
}

export function Kbd({ children, ...rest }) {
  return <kbd className="dd-kbd" {...rest}>{children}</kbd>;
}

export function HotkeyCombo({ keys = [], gap = 4 }) {
  return (
    <span style={{ display: 'inline-flex', gap, alignItems: 'center' }}>
      {keys.map((k, i) => <Kbd key={i}>{k}</Kbd>)}
    </span>
  );
}