import { cn } from "@/lib/utils";

interface KeyboardShortcutHintProps {
  keys: string[];
  className?: string;
}

function formatKey(key: string): string {
  const isMac = navigator.platform.toUpperCase().includes("MAC");
  switch (key.toLowerCase()) {
    case "mod":
    case "cmd":
      return isMac ? "\u2318" : "Ctrl";
    case "shift":
      return isMac ? "\u21E7" : "Shift";
    case "alt":
    case "option":
      return isMac ? "\u2325" : "Alt";
    case "enter":
    case "return":
      return "\u21B5";
    case "escape":
    case "esc":
      return "Esc";
    case "backspace":
      return "\u232B";
    case "delete":
      return "Del";
    case "arrowup":
      return "\u2191";
    case "arrowdown":
      return "\u2193";
    case "arrowleft":
      return "\u2190";
    case "arrowright":
      return "\u2192";
    default:
      return key.toUpperCase();
  }
}

export function KeyboardShortcutHint({ keys, className }: KeyboardShortcutHintProps) {
  return (
    <span className={cn("inline-flex items-center gap-0.5", className)}>
      {keys.map((key, i) => (
        <kbd
          key={i}
          className="inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1 text-[10px] font-mono text-muted-foreground"
        >
          {formatKey(key)}
        </kbd>
      ))}
    </span>
  );
}
