refactor.tsx

type Section = {
  title: String;
  totals: number[];
  total: number;
};

export const BalanceSheetSummarySection = ({
  sections,
}: {
  sections: Section[];
}) => (
  <table className="w-full text-left mt-5">
    <InteractiveTableHeader headers={headers} />
    <tbody>
      {sections.map((section: Section, i: number) => (
        <tr key={i}>
          <TableItem className="bg-slate-300 font-bold">
            {section.title}
          </TableItem>

          {section.totals.map((total: number, i: number) => (
            <TableItem key={i}>{total}</TableItem>
          ))}

          <TableItem className="bg-slate-500 text-right">
            {section.total}
          </TableItem>
        </tr>
      ))}
    </tbody>
  </table>
);