Shortcut Button

"use client";

import { useEffect, useRef, type ButtonHTMLAttributes, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ShortcutButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  children?: ReactNode;
  /** Single key that triggers the button (combined with ⌘/Ctrl when `mod` is true). */
  hotkey?: string;
  mod?: boolean;
  variant?: "primary" | "secondary" | "ghost";
}

const VARIANTS = {
  primary: "bg-da-fg text-da-bg hover:bg-da-fg/85",
  secondary: "da-stroke bg-da-surface text-da-surface-fg hover:bg-da-muted",
  ghost: "text-da-muted-fg hover:bg-da-muted hover:text-da-fg",
} as const;

/**
 * Button showing its keyboard shortcut as keycaps; pressing the shortcut anywhere on the page clicks it
 * (ignored while typing in a field).
 */
export function ShortcutButton({ children = "New incident", hotkey = "i", mod = false, variant = "primary", className, ...rest }: ShortcutButtonProps) {
  const ref = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement | null;
      if (t && (t.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(t.tagName))) return;
      if (e.key.toLowerCase() !== hotkey.toLowerCase() || mod !== (e.metaKey || e.ctrlKey) || e.altKey) return;
      if (ref.current?.disabled) return;
      e.preventDefault();
      ref.current?.click();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [hotkey, mod]);

  const keys = [...(mod ? ["⌘"] : []), hotkey.toUpperCase()];

  return (
    <button
      ref={ref}
      type="button"
      aria-keyshortcuts={`${mod ? "Meta+" : ""}${hotkey.toUpperCase()}`}
      {...rest}
      className={cn(
        "da-focus da-transition inline-flex h-8 items-center gap-2 rounded-da-md pr-1.5 pl-3 text-[13px] font-medium disabled:pointer-events-none disabled:opacity-50",
        VARIANTS[variant],
        className,
      )}
    >
      {children}
      <span aria-hidden className="flex gap-0.5">
        {keys.map((k) => (
          <kbd
            key={k}
            className={cn(
              "grid h-5 min-w-5 place-items-center rounded-[4px] px-1 font-da-mono text-[11px]",
              variant === "primary" ? "bg-da-bg/15" : "bg-da-muted text-da-muted-fg ring-1 ring-da-border",
            )}
          >
            {k}
          </kbd>
        ))}
      </span>
    </button>
  );
}

export default ShortcutButton;