Header Search

"use client";

import { useId, useState } from "react";
import { Search, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderSearchProps {
  placeholder?: string;
  filters?: { value: string; label: string; emoji: string }[];
  onSearch?: (q: string, filters: string[]) => void;
  className?: string;
}

/** Search-first header: wide rounded search field with a clear button, and emoji filter chips (Mine, Due soon, Overdue…) that toggle underneath. */
export function HeaderSearch({
  placeholder = "Search tasks, boards and people",
  filters = [
    { value: "mine", label: "Assigned to me", emoji: "🙋" },
    { value: "soon", label: "Due soon", emoji: "⏰" },
    { value: "overdue", label: "Overdue", emoji: "🚨" },
    { value: "done", label: "Done", emoji: "✅" },
  ],
  onSearch,
  className,
}: HeaderSearchProps) {
  const id = useId();
  const [q, setQ] = useState("");
  const [active, setActive] = useState<string[]>(["mine"]);
  const toggle = (v: string) => {
    const next = active.includes(v) ? active.filter((x) => x !== v) : [...active, v];
    setActive(next);
    onSearch?.(q, next);
  };
  return (
    <header className={cn("bg-da-bg px-4 py-6 text-da-fg sm:px-8", className)}>
      <form
        role="search"
        onSubmit={(e) => {
          e.preventDefault();
          onSearch?.(q, active);
        }}
        className="flex h-14 items-center gap-3 rounded-da-pill bg-da-surface px-5 shadow-da-md focus-within:ring-(length:--da-ring-width) focus-within:ring-da-ring"
      >
        <Search aria-hidden className="size-5 text-da-muted-fg" />
        <label htmlFor={id} className="sr-only">
          Search
        </label>
        <input
          id={id}
          type="search"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder={placeholder}
          className="min-w-0 flex-1 bg-transparent text-base outline-none placeholder:text-da-muted-fg [&::-webkit-search-cancel-button]:hidden"
        />
        {q && (
          <button
            type="button"
            aria-label="Clear search"
            onClick={() => setQ("")}
            className="da-focus grid size-8 place-items-center rounded-full bg-da-surface-2"
          >
            <X aria-hidden className="size-4" />
          </button>
        )}
      </form>
      <div role="group" aria-label="Filters" className="mt-4 flex flex-wrap gap-2">
        {filters.map((f) => (
          <button
            key={f.value}
            type="button"
            aria-pressed={active.includes(f.value)}
            onClick={() => toggle(f.value)}
            className={cn(
              "da-focus da-transition inline-flex h-10 items-center gap-2 rounded-da-pill px-4 text-sm font-semibold",
              active.includes(f.value) ? "bg-da-fg text-da-bg" : "bg-da-surface-2 hover:bg-da-muted",
            )}
          >
            <span aria-hidden>{f.emoji}</span>
            {f.label}
          </button>
        ))}
      </div>
    </header>
  );
}

export default HeaderSearch;