// frontend/src/components/ui/HeaderSearch.jsx
// Minimal pill-shaped search input for the top bar.
//
// Intentionally different from <SearchBar>:
//   - Background: --color-bg-surface (not abyss/elevated)
//   - Shape: fully pill-rounded (--radius-full)
//   - No border, no shadow, no focus ring outline — purely minimal
//
// Props:
//   value       — string   — controlled value
//   onChange    — fn(str)  — called on every keystroke
//   placeholder — string   — defaults to "Search…"

function SearchIcon() {
  return (
    <svg
      width="13" height="13" viewBox="0 0 13 13"
      fill="none" stroke="currentColor"
      strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true" focusable="false"
    >
      <circle cx="5.5" cy="5.5" r="4" />
      <path d="M8.5 8.5L11 11" />
    </svg>
  )
}

export default function HeaderSearch({ value, onChange, placeholder = 'Search…' }) {
  return (
    <div className="v2-topbar-search">
      <span className="v2-topbar-search-icon">
        <SearchIcon />
      </span>
      <input
        type="search"
        className="v2-topbar-search-input"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        aria-label={placeholder}
        autoComplete="off"
        spellCheck={false}
      />
    </div>
  )
}
