import { useTableContext } from '../table-context/table-context-provider';
import EditableTableFooterCell from './footer-cell';

export default function EditabletableFooter<TData>() {
  const { table } = useTableContext<TData>();

  return (
    <tfoot className="sticky bottom-0 bg-neutral-100 before:absolute before:top-0 before:w-full before:border-t before:border-t-neutral-200">
      {table.getFooterGroups().map((footerGroup) => (
        <tr key={footerGroup.id}>
          {footerGroup.headers.map((header) => (
            <EditableTableFooterCell key={header.id} header={header} />
          ))}
        </tr>
      ))}
    </tfoot>
  );
}