// "Latest activity" — ported from the original design prototype's .act
// card. Rows are buttons so Task 9's entry-detail drawer can hang an
// onClick here without restructuring markup (see BalancePanel.tsx's
// identical note).

import { fmtDate } from "../lib/date";
import { fmtMoney } from "../lib/money";

export interface ActivityRow {
  entryId: string;
  entryNo: string;
  date: string;
  who: string | null;
  memo: string | null;
  amount: string;
  reversed: boolean;
}

export function ActivityList({
  activity,
  onSelectEntry,
}: {
  activity: ActivityRow[];
  onSelectEntry?: (entryId: string) => void;
}) {
  return (
    <div className="card act">
      <h2>Latest activity</h2>
      <div className="sub">Most recent entries in the journal.</div>
      {activity.map((row) => (
        <button
          key={row.entryId}
          type="button"
          className="row"
          style={{ all: "unset", display: "flex", width: "100%", cursor: "pointer" }}
          onClick={() => onSelectEntry?.(row.entryId)}
        >
          <div>
            <div className="who">{row.who ?? "Journal entry"}</div>
            <div className="when">
              {row.memo ? `${row.memo} · ` : ""}
              {fmtDate(row.date)}
              {row.reversed ? " · reversed" : ""}
            </div>
          </div>
          <div className="amt">{fmtMoney(row.amount)}</div>
        </button>
      ))}
    </div>
  );
}
