"use client";

import { useRouter } from "next/navigation";

import { useState } from "react";

import { clsx } from "@/lib/cx";

export function SearchBox({ initialValue }: { initialValue: string }) {

  const router = useRouter();

  const [value, setValue] = useState(initialValue);

  return (

    <form

      role="search"

      action="/search"

      method="get"

      onSubmit={(e) => {

        e.preventDefault();

        const q = value.trim();

        router.push(q ? `/search?q=${encodeURIComponent(q)}` : "/search");

      }}

    >

      <label htmlFor="docket-search" className="label mb-2 block">

        Look up my state, my representative, or a topic

      </label>

      <div className="flex flex-col gap-2 sm:flex-row">

        <input

          id="docket-search"

          type="search"

          name="q"

          value={value}

          onChange={(e) => setValue(e.target.value)}

          placeholder="e.g. CA, H.R. 25, Cantwell, tax, appropriations"

          autoComplete="off"

          aria-label="Search the record"

          className={clsx(

            "focus-ring min-h-[52px] w-full rounded-[2px] border border-line bg-ink px-4",

            "font-mono text-[18px] text-paper placeholder:text-ash-2"

          )}

        />

        <button

          type="submit"

          className={clsx(

            "focus-ring label inline-flex min-h-[52px] min-w-[120px] items-center justify-center rounded-[2px]",

            "border border-line bg-surface px-6 text-paper underline-offset-4 transition-colors",

            "hover:bg-graphite"

          )}

        >

          Search

        </button>

      </div>

    </form>

  );

}