Use Shortcut Label

"use client";

import { useEffect, useState } from "react";

/**
 * Platform-aware shortcut label: `useShortcutLabel("K")` → "⌘K" on Apple
 * platforms, "Ctrl K" elsewhere. Resolves after mount (returns `null` on the
 * server and first client render) so SSR markup never guesses the platform.
 */
export function useShortcutLabel(key: string): string | null {
  const [label, setLabel] = useState<string | null>(null);

  useEffect(() => {
    // navigator.platform is deprecated and empty in some browsers; prefer
    // userAgentData where available, then fall back through userAgent.
    const platform =
      (navigator as { userAgentData?: { platform?: string } }).userAgentData
        ?.platform ||
      navigator.platform ||
      navigator.userAgent;
    const isApple = /mac|iphone|ipad/i.test(platform);
    setLabel(isApple ? `⌘${key}` : `Ctrl ${key}`);
  }, [key]);

  return label;
}