"use client";

import { useQuickAdd } from "@/components/quick-add-provider";
import { NavIcon } from "@/components/nav-icon";

function useShortcutLabel() {
  if (typeof navigator === "undefined") return "⌘K";
  return /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? "⌘K" : "Ctrl+K";
}

export function TopbarSearch() {
  const { openPalette } = useQuickAdd();
  const shortcut = useShortcutLabel();

  return (
    <>
      {/* Desktop: pill with shortcut hint */}
      <button
        type="button"
        onClick={openPalette}
        aria-label={`Search (${shortcut})`}
        className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
        style={{
          border: "0.5px solid var(--hair-2)",
          background: "var(--card)",
          color: "var(--ink-mute)",
          width: 220,
        }}
      >
        <NavIcon name="search" className="size-3.5" />
        <span style={{ flex: 1, textAlign: "left" }}>Search…</span>
        <span className="kbd">{shortcut}</span>
      </button>

      {/* Mobile: icon-only */}
      <button
        type="button"
        onClick={openPalette}
        aria-label="Search"
        className="flex md:hidden items-center justify-center h-8 w-8 rounded-md"
        style={{ color: "var(--ink-mute)" }}
      >
        <NavIcon name="search" className="size-4" />
      </button>
    </>
  );
}