Search Input

"use client";

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

export interface SearchInputProps {
  label?: string;
  items?: { title: string; kind: string; href: string }[];
  /** Initial query. */
  defaultQuery?: string;
  className?: string;
}

const DEFAULT_ITEMS = [
  { title: "Oslo Opera — Identity", kind: "Project", href: "#p1" },
  { title: "Kiln Coffee — Packaging", kind: "Project", href: "#p2" },
  { title: "Atlas", kind: "Template", href: "#t1" },
  { title: "Custom domains", kind: "Help", href: "#h1" },
  { title: "Typography settings", kind: "Help", href: "#h2" },
];

/** Search field with live results: hairline-bordered input with icon and ⌘K hint; matches appear in a ruled list below with the query highlighted and a mono kind label; empty state included. */
export function SearchInput({ label = "Search", items = DEFAULT_ITEMS, defaultQuery = "ra", className }: SearchInputProps) {
  const id = useId();
  const [q, setQ] = useState(defaultQuery);
  const results = useMemo(() => (q.trim() ? items.filter((i) => i.title.toLowerCase().includes(q.trim().toLowerCase())) : []), [items, q]);
  const mark = (t: string) => {
    const i = t.toLowerCase().indexOf(q.trim().toLowerCase());
    if (i < 0 || !q.trim()) return t;
    return (
      <>
        {t.slice(0, i)}
        <mark className="bg-da-accent/30 text-inherit">{t.slice(i, i + q.trim().length)}</mark>
        {t.slice(i + q.trim().length)}
      </>
    );
  };
  return (
    <div className={cn("w-full max-w-md", className)}>
      <label htmlFor={id} className="sr-only">
        {label}
      </label>
      <div className="flex h-11 items-center gap-3 border border-da-border px-3 focus-within:border-da-border-strong">
        <Search aria-hidden className="size-4 text-da-muted-fg" />
        <input
          id={id}
          type="search"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Projects, templates, help…"
          aria-controls={`${id}-r`}
          className="min-w-0 flex-1 bg-transparent outline-none placeholder:text-da-muted-fg"
        />
        <kbd className="rounded-da-sm border border-da-border px-1 font-da-mono text-[11px] text-da-muted-fg">⌘K</kbd>
      </div>
      <div id={`${id}-r`} aria-live="polite">
        {q.trim() &&
          (results.length ? (
            <ul className="border-x border-b border-da-border">
              {results.map((r) => (
                <li key={r.href} className="border-b border-da-border last:border-0">
                  <a href={r.href} className="da-focus flex items-center justify-between gap-4 px-3 py-2.5 text-[15px] hover:bg-da-surface-2">
                    <span>{mark(r.title)}</span>
                    <span className="font-da-mono text-[10px] tracking-da-label text-da-muted-fg uppercase">{r.kind}</span>
                  </a>
                </li>
              ))}
            </ul>
          ) : (
            <p className="border-x border-b border-da-border px-3 py-4 text-sm text-da-muted-fg">No results for “{q}”.</p>
          ))}
      </div>
    </div>
  );
}

export default SearchInput;