"use client";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { IconSearch } from "@/components/icons";
export function EstimateSearch({ initial }: { initial: string }) {
  const [q, setQ] = useState(initial); const router = useRouter();
  return (
    <form onSubmit={(e) => { e.preventDefault(); if (q.trim()) router.push(`/estimer?q=${encodeURIComponent(q.trim())}`); }} className="relative">
      <IconSearch className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-3" />
      <input value={q} onChange={(e) => setQ(e.target.value)} className="tv-input py-3.5 text-base pr-28" placeholder="1234 Rue des Érables, Québec" aria-label="Adresse à estimer" />
      <button type="submit" className="tv-btn tv-btn-primary absolute right-1.5 top-1/2 -translate-y-1/2">Estimer</button>
    </form>
  );
}