import { useState } from "react";
import { Button } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";

export function CodeSearchForm({ initial, onSearch }: { initial: string; onSearch: (query: string) => void }) {
  const [query, setQuery] = useState(initial);
  return (
    <search>
      <form
        className="flex gap-2"
        onSubmit={(event) => {
          event.preventDefault();
          onSearch(query.trim());
        }}
      >
        <label htmlFor="code-search" className="sr-only">
          Search code
        </label>
        <input
          id="code-search"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Search code (use path:dir to filter by path)"
          className={cn(inputClass, "h-9 flex-1 font-mono text-sm")}
        />
        <Button type="submit" size="sm">
          Search
        </Button>
      </form>
    </search>
  );
}