Jyotisha/frontend/src/components/rectification-house-table.tsx

"use client";

import type { RectificationHouseTable } from "@/lib/rectification-candidate-result";

export function RectificationHouseTableView({
  table,
  changedHouses,
  lagnaChanged,
}: Readonly<{
  table: RectificationHouseTable;
  changedHouses?: ReadonlySet<number>;
  lagnaChanged?: boolean;
}>) {
  const changed = changedHouses ?? new Set<number>();
  return (
    <section className="rectification-house-table" aria-label="当前本命宫位">
      <div className="rectification-house-table__heading">
        <strong>当前本命宫位</strong>
        <span>
          按 {table.time} 排出，上升{table.lagna}
          {lagnaChanged ? "（已更新）" : ""}。补充经历后会按新线索重算。
        </span>
        <span>这是当前代表性时间下的盘面，不是已确认出生盘。</span>
      </div>
      <div className="markdown-table">
        <table>
          <thead>
            <tr>
              <th scope="col">宫位</th>
              <th scope="col">星座</th>
              <th scope="col">入驻</th>
            </tr>
          </thead>
          <tbody>
            {table.houses.map((house) => {
              const houseChanged = changed.has(house.house);
              return (
                <tr key={house.house} data-changed={houseChanged ? "true" : undefined}>
                  <th scope="row">第{house.house}宫</th>
                  <td>
                    {house.sign}
                    {houseChanged ? <span className="rectification-house-table__changed">已更新</span> : null}
                  </td>
                  <td>{house.occupants.length > 0 ? house.occupants.join("、") : "—"}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </section>
  );
}