`src/components/offer-form.tsx`

58 lines
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export function OfferForm({ listingId }: { listingId: string }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [offer, setOffer] = useState("");
  const [status, setStatus] = useState<"idle" | "sending" | "done" | "error">("idle");

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch(`/api/listings/${listingId}/buyer-lead`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name,
          email,
          offer: offer ? Number(offer) : undefined,
        }),
      });
      setStatus(res.ok ? "done" : "error");
    } catch {
      setStatus("error");
    }
  }

  if (status === "done") {
    return (
      <p className="rounded-md border border-[var(--positive)]/40 bg-[var(--positive)]/10 p-3 text-sm">
        Thanks — your <strong>contingent, non-binding</strong> interest is recorded. We&apos;ll follow up
        only if we win this lot.
      </p>
    );
  }

  return (
    <form onSubmit={submit} className="space-y-2">
      <Input placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} required />
      <Input placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
      <Input
        placeholder="Contingent offer (optional, USD)"
        type="number"
        value={offer}
        onChange={(e) => setOffer(e.target.value)}
      />
      <Button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Submitting…" : "Register contingent interest"}
      </Button>
      {status === "error" && <p className="text-sm text-[var(--negative)]">Something went wrong — try again.</p>}
    </form>
  );
}