'use client';
import { Search } from 'lucide-react';
import { useOpenSearch } from '@/components/layout/search-context';
import { cn } from '@/lib/cn';

/** Secondary hero CTA: opens the global ⌘K search dialog. */
export function SearchButton({ className }: { className?: string }) {
  const open = useOpenSearch();
  return (
    <button type="button" onClick={open} className={cn('inline-flex h-12 items-center justify-center gap-2 rounded-md border border-rule-strong px-5 text-sm font-medium text-ink hover:bg-plane-2', className)}>
      <Search className="size-4" aria-hidden />
      Search satellites
      <kbd className="mono ml-1 hidden rounded border border-rule px-1.5 py-0.5 text-[10px] text-ink-3 md:inline">⌘K</kbd>
    </button>
  );
}