`apps/web/src/app/compare/page.tsx`

55 lines
"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { fmtPrice } from "@homesonspec/shared-ui";

interface Home {
  id: string;
  street: string | null;
  city: string;
  state: string;
  price: string | null;
  beds: number | null;
  bathsTotal: string | null;
  sqft: number | null;
  stories: number | null;
  garageSpaces: number | null;
  constructionStatus: string;
  community: { name: string };
  builder: { name: string };
}

/** v1 stub: compares homes saved to localStorage from search/detail pages. */
export default function ComparePage() {
  const [homes, setHomes] = useState<Home[]>([]);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const ids: string[] = JSON.parse(localStorage.getItem("homesonspec.compare") ?? "[]");
    if (ids.length === 0) {
      setLoaded(true);
      return;
    }
    Promise.all(
      ids.slice(0, 4).map((id) =>
        fetch(`/api/search?pageSize=1&page=1`).then(() => null).catch(() => null),
      ),
    ).finally(() => setLoaded(true));
    // v1: full compare fetch lands with saved-homes accounts; render IDs for now.
    setHomes([]);
  }, []);

  return (
    <div className="mx-auto max-w-4xl px-4 py-10">
      <h1 className="text-3xl font-bold">Compare homes</h1>
      {loaded && homes.length === 0 && (
        <p className="mt-4 text-neutral-600">
          Nothing to compare yet. Browse the <Link href="/search" className="text-teal-700 underline">search page</Link>{" "}
          and add homes — side-by-side comparison arrives with saved-home accounts (deferred in v1).
        </p>
      )}
    </div>
  );
}