"use client";

import { Search } from "lucide-react";
import { usePathname } from "next/navigation";

import { buttonClass } from "@/lib/ui/variants";
import { CommandPalette, openCommandPalette } from "./CommandPalette";

// 全局挂载命令面板（⌘K）：读当前 pathname 注入项目上下文。
// 放在 RootLayout 内，对所有页面生效。
export function CommandPaletteMount() {
  const pathname = usePathname();
  return <CommandPalette pathname={pathname ?? "/"} />;
}

// 命令面板的可见入口（顶栏常驻）：让不知道 ⌘K 的用户也能发现搜索。
// 与 ⌘K 触发同一外部 store，移动端折叠为图标。
export function CommandSearchButton() {
  return (
    <button
      type="button"
      onClick={() => openCommandPalette()}
      aria-label="搜索命令或页面"
      title="搜索命令或页面（⌘K）"
      className={buttonClass({
        variant: "ghost",
        size: "sm",
        className: "border-transparent",
      })}
    >
      <Search className="h-4 w-4" aria-hidden="true" />
      <span className="hidden sm:inline">搜索</span>
      <kbd className="hidden rounded border border-line bg-bg px-1 font-mono text-2xs text-ink-soft sm:inline">
        ⌘K
      </kbd>
    </button>
  );
}