import { Link } from "@tanstack/react-router";
import { AUCTION_CAUSE, AUCTION_DISCLOSURE } from "@/lib/auction";
import type { AuctionLot } from "@/lib/server/api-stadium";
import { moneyCents } from "@/lib/utils";

const STATUS: Record<AuctionLot["status"], string> = {
  live: "Live",
  closed: "Hammered",
  upcoming: "Opens later",
};

export function AuctionCatalog({ lots }: { lots: AuctionLot[] }) {
  return (
    <div className="auction-catalog">
      <p className="auction-cause">{AUCTION_CAUSE}</p>
      <ul className="auction-tiles">
        {lots.map((lot) => (
          <li key={lot.id}>
            <Link to="/public/auction/$lot" params={{ lot: lot.id }} className="auction-tile">
              <div className="auction-photo">
                <img src={lot.image_path} alt="" />
                {lot.sample_only ? <span>Sample only</span> : null}
              </div>
              <p className="auction-status" data-status={lot.status}>
                {STATUS[lot.status]}
                {lot.mine === "leading" ? " · you’re leading" : lot.mine === "won" ? " · you won" : lot.mine === "outbid" ? " · you’re outbid" : ""}
              </p>
              <h3>{lot.title}</h3>
              <p className="auction-high tabular">
                {lot.status === "upcoming" ? `Opens at ${moneyCents(lot.reserve_cents)}` : `High ${moneyCents(lot.high_cents || lot.reserve_cents)}`}
                {` · FMV ${moneyCents(lot.fmv_cents)}`}
              </p>
            </Link>
          </li>
        ))}
      </ul>
      <p className="auction-legal">{AUCTION_DISCLOSURE}</p>
    </div>
  );
}