"use client";

export const SearchButton = () => (
  <button
    className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-border text-sm text-muted-foreground hover:text-foreground hover:border-accent/50 transition-colors"
    onClick={() => {
      // TODO: Search-Modal oeffnen
      document.dispatchEvent(new CustomEvent("open-search"));
    }}
  >
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="11" cy="11" r="8" />
      <path d="M21 21l-4.35-4.35" />
    </svg>
    <span className="hidden sm:inline">Suche...</span>
    <kbd className="hidden sm:inline-flex items-center text-xs border border-border rounded px-1.5 py-0.5 ml-2">
      ⌘K
    </kbd>
  </button>
);
