import type { ReportAddendum } from "../../utils/reportAddendum";
import { formatDateTime } from "../../utils/dateUtils";
import "./ReportAddenda.css";

/**
 * What was added to a report after it was signed.
 *
 * SHOWN BESIDE THE SIGNED WORDS, NEVER FOLDED INTO THEM. Somebody has already read the report and
 * acted on it -- that is what signing is for -- so a reader has to be able to tell what they would
 * have seen from what has been added since. Merging the two would leave two people who believe they
 * read the same document and did not.
 *
 * DATED AND ATTRIBUTED, EACH ONE, because the sequence is itself clinical: the order in which
 * somebody came to understand a study is part of understanding it.
 */
export const ReportAddenda = ({ addenda }: { addenda: ReportAddendum[] }) => (
  <div className="report-addenda">
    <p className="report-addenda-heading">Added after signing</p>
    {addenda.map((addendum, at) => (
      <div className="report-addendum" key={`${addendum.at ?? at}`}>
        <p className="report-addendum-text">{addendum.text}</p>
        <p className="report-addendum-who">
          {[addendum.by, addendum.at ? formatDateTime(addendum.at) : undefined]
            .filter(Boolean)
            .join(" · ") || "Author not recorded"}
        </p>
      </div>
    ))}
  </div>
);