import {
  AnyObject,
  PANCHANG_ELEMENTS,
  extractField,
  formatPanchangElement,
} from "@/app/lib/panchangParse";

interface Props {
  derivedToday: AnyObject;

  samvatRows: { label: string; value: any }[];
}

/*
|--------------------------------------------------------------------------
| Panchang Details + Samvat (two-column reference table)
|--------------------------------------------------------------------------
|
| Shared across every panchang page — Today/Tomorrow Panchang and
| each single-topic page (Rahu Kaal, Tithi, Choghadiya, Vaar, Hora)
| all show this same celestial snapshot for context.
|
*/

export default function PanchangDetailsTable({ derivedToday, samvatRows }: Props) {
  return (
    <div id="panchang-details" className="panchang-two-col">
      <section className="panchang-section-card accent-yellow">
        <table className="panchang-kv-table">
          <tbody>
            {PANCHANG_ELEMENTS.map((element) => {
              const value = extractField(derivedToday, element.aliases);

              if (value === undefined || value === null) {
                return null;
              }

              return (
                <tr key={element.key}>
                  <td className="panchang-kv-label">{element.label}</td>
                  <td className="panchang-kv-value">{formatPanchangElement(value)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>

        {Object.keys(derivedToday).length === 0 && (
          <p className="panchang-empty">Panchang details are unavailable right now.</p>
        )}
      </section>

      <section className="panchang-section-card accent-yellow">
        <table className="panchang-kv-table">
          <tbody>
            {samvatRows.length > 0 ? (
              samvatRows.map((row) => (
                <tr key={row.label}>
                  <td className="panchang-kv-label">{row.label}</td>
                  <td className="panchang-kv-value">{formatPanchangElement(row.value)}</td>
                </tr>
              ))
            ) : (
              <tr>
                <td className="panchang-empty" colSpan={2}>
                  Samvat details are unavailable right now.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </section>
    </div>
  );
}