"use client";

import { useSyncExternalStore } from "react";
import { IconSearch } from "@/components/icons";

// Petit indicateur "⌘K / Ctrl+K" qui sert de hint pour la command palette.
// useSyncExternalStore plutôt qu'un useEffect+setState (qui violerait la
// règle react-hooks/set-state-in-effect) — on lit la plateforme uniquement
// après hydration côté client.

function getIsMac(): boolean {
  if (typeof navigator === "undefined") return false;
  const src = navigator.userAgent || navigator.platform || "";
  return /Mac|iPhone|iPad|iPod/i.test(src);
}

const subscribe = () => () => {};

export function CommandHint() {
  const isMac = useSyncExternalStore(
    subscribe,
    getIsMac,
    () => false, // snapshot SSR — on commence par Ctrl, hydraté en ⌘ si Mac
  );
  const meta = isMac ? "⌘" : "Ctrl";

  return (
    <div className="hidden md:flex mx-3 mb-3 mt-3 items-center gap-2 rounded-md border border-sidebar-active bg-sidebar-active/50 px-3 py-2 text-xs text-sidebar-muted hover:text-sidebar-foreground transition-colors cursor-default">
      <IconSearch size={12} />
      <span className="flex-1">Rechercher</span>
      <kbd className="rounded border border-sidebar-active bg-sidebar/60 px-1.5 py-0.5 font-mono text-[10px]">
        {meta}
      </kbd>
      <kbd className="rounded border border-sidebar-active bg-sidebar/60 px-1.5 py-0.5 font-mono text-[10px]">
        K
      </kbd>
    </div>
  );
}