import React from "react";

import {
  TableCell,
  TableCellProps,
  TableFooter,
  TableFooterProps,
  Typography,
} from "@mui/material";

export interface TableSummaryProps extends React.PropsWithChildren {
  columns: number;
  rowProps?: TableFooterProps;
  cellProps?: TableCellProps;
}

export const TableSummary: React.FC<TableSummaryProps> = ({
  cellProps,
  children,
  columns,
  rowProps,
}) => (
  <TableFooter {...rowProps} sx={{ cursor: "pointer", ...rowProps?.sx }}>
    <TableCell colSpan={columns - 1} />

    <TableCell {...cellProps} align={cellProps?.align ?? "right"}>
      <Typography sx={{ width: "max-content" }} variant="body2">
        {children}
      </Typography>
    </TableCell>
  </TableFooter>
);