"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function SearchBar() {
  const router = useRouter();
  const [query, setQuery] = useState("");

  function handleSearch(e: React.FormEvent) {
    e.preventDefault();
    const params = new URLSearchParams({ q: query });
    router.push(`/all-cars?${params.toString()}`);
  }

  return (
    <form
      onSubmit={handleSearch}
      className="bg-white rounded-2xl shadow-float p-3 flex gap-2 items-stretch"
    >
      <div className="flex items-center gap-2 border border-[#e2e6ed] rounded-xl px-4 py-2.5 flex-1 min-w-0">
        <svg className="w-4 h-4 text-[#5c6472] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <circle cx="11" cy="11" r="8" strokeWidth={2}/>
          <path strokeLinecap="round" strokeWidth={2} d="m21 21-4.35-4.35"/>
        </svg>
        <input
          type="text"
          value={query}
          onChange={e => setQuery(e.target.value)}
          placeholder="Search by brand or model…"
          className="text-sm text-[#1a1f2e] bg-transparent outline-none w-full placeholder-[#5c6472]"
          aria-label="Search by brand or model"
        />
      </div>
      <button type="submit" className="btn-orange px-6 text-sm font-bold flex-shrink-0">
        Search
      </button>
    </form>
  );
}