import { PropertyBrowser } from "@/components/property-browser";
import type { TransactionClass } from "@/lib/core/contracts";
import { getMockPublicProperties } from "@/lib/core/mock-projection";

export function PropertyIndex({
  transaction,
  eyebrow,
  title,
  lead,
}: {
  transaction: TransactionClass;
  eyebrow: string;
  title: string;
  lead: string;
}) {
  const properties = getMockPublicProperties().filter(
    (property) => property.transaction === transaction,
  );

  return (
    <>
      <section className="listing-hero">
        <p className="eyebrow">{eyebrow}</p>
        <h1>{title}</h1>
        <p>{lead}</p>
      </section>
      <section
        className="section listing-section"
        aria-labelledby="results-title"
      >
        <div className="section-heading">
          <div>
            <p className="eyebrow">Local demonstration</p>
            <h2 id="results-title">Explore mock properties.</h2>
          </div>
          <p>
            {properties.length} development-only result
            {properties.length === 1 ? "" : "s"}. No live availability or
            operational status is shown.
          </p>
        </div>
        <PropertyBrowser properties={properties} />
        <div className="boundary-note">
          Production filters will operate only on signed, current, publishable
          fields received from NYSA CORE.
        </div>
      </section>
    </>
  );
}