"use client";

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

export function RectificationHouseTableView({
  table,
}: Readonly<{ table: RectificationHouseTable }>) {
  return (
    <section className="rectification-house-table" aria-label="本命宫位表">
      <div className="rectification-house-table__heading">
        <strong>本命宫位</strong>
        <span>
          按 {table.time} 排出，上升{table.lagna}。这是当前代表性时间下的盘面，不是已确认出生盘。
        </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) => (
              <tr key={house.house}>
                <th scope="row">第{house.house}宫</th>
                <td>{house.sign}</td>
                <td>{house.occupants.length > 0 ? house.occupants.join("、") : "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}