Resolved field

"use client";

import { useEffect, useState } from "react";
import { CruiseInput } from "@/components/cruise/input";
import { CruiseResolvedField, type CruiseResolveStatus } from "@/components/cruise/resolved-field";

// A pretend lookup: in your app, call your bank-lookup API.
const fakeLookup = (account: string) =>
  new Promise<string | null>((resolve) => setTimeout(() => resolve(account.startsWith("0") ? "ADA OKAFOR" : null), 900));

export default function ResolvedFieldExample() {
  const [account, setAccount] = useState("");
  const [result, setResult] = useState<{ status: CruiseResolveStatus; name?: string; for?: string }>({ status: "idle" });
  const complete = /^\d{10}$/.test(account);
  // Shown state: idle until 10 digits; otherwise the lookup for this number.
  const status: CruiseResolveStatus = !complete ? "idle" : result.for === account ? result.status : "resolving";

  useEffect(() => {
    if (!complete) return;
    let live = true;
    fakeLookup(account).then((name) => live && setResult({ status: name ? "resolved" : "error", name: name ?? undefined, for: account }));
    return () => {
      live = false;
    };
  }, [account, complete]);

  return (
    <div className="flex max-w-md flex-col gap-4">
      <CruiseInput label="Account number" inputMode="numeric" maxLength={10} hint="Try 0123456789 (found) or 9876543210 (not found)." value={account} onChange={(e) => setAccount(e.target.value.replace(/\D/g, ""))} />
      <CruiseResolvedField status={status} value={result.name} onRetry={() => setResult({ status: "idle" })} />
    </div>
  );
}