"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { SearchBar } from "@/components/search-bar";
export function HomeTabs() {
  const [tab, setTab] = useState<"achat" | "location" | "estimer">("achat"); const router = useRouter();
  return (
    <div>
      <div className="tv-tabs mb-3" role="tablist">{([["achat", "Acheter"], ["location", "Louer"], ["estimer", "Estimer"]] as const).map(([id, l]) => <button key={id} role="tab" type="button" aria-selected={tab === id} className="tv-tab" onClick={() => setTab(id)}>{l}</button>)}</div>
      {tab === "estimer" ? (
        <form onSubmit={(e) => { e.preventDefault(); const q = new FormData(e.currentTarget).get("q"); router.push(`/estimer?q=${encodeURIComponent(String(q ?? ""))}`); }} className="relative">
          <input name="q" className="tv-input py-3.5 text-base pr-28 !pl-4" placeholder="Adresse de la propriété à estimer" 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>
      ) : <SearchBar market={tab} />}
      <div className="mt-3 flex gap-2 flex-wrap text-xs">{(tab === "location" ? [["Montréal", "ville"], ["Québec", "ville"], ["Laval", "ville"], ["Gatineau", "ville"], ["Sherbrooke", "ville"]] : [["Montréal", "ville"], ["Québec", "ville"], ["Laurentides", "region"], ["Montérégie", "region"], ["Estrie", "region"]]).map(([n, k]) => <a key={n} href={`/recherche?marche=${tab === "estimer" ? "achat" : tab}&${k}=${encodeURIComponent(n)}`} className="tv-chip">{n}</a>)}</div>
    </div>
  );
}