'use client';

import { Text } from '@/components/ui/text';
import { Heading } from '@/components/ui/heading';
import { useTableContainer } from '@/hooks/useTableContainer';
import SettingTools from './SettingTools';
import TableView from './TableView';
import { store } from '@/store/store';
import { BucketProp } from '@/types';
import MenusTableSkeleton from './menus-table-skeleton';

const TableContainer = ({ bucket }: BucketProp) => {
  // Pass config directly to the hook since it now expects CommissionConfig
  const { tableData, handlePaginatedRecords, loading } =
    useTableContainer(bucket);

  return (
    <main className="main-full">
      <Text className="container-widget mx-auto">
        <Text className="wo-favorite-table box wo-table-ui-scroller">
          <Text className="wo-box-header flex justify-between gap-5">
            <Text className="wo-box-header-left">
              <Heading level="h3" className="box-title text-primary">
                {bucket.heading}{' '}
                {store.getState().filters.is_applied
                  ? ' - Filtered Records'
                  : ''}
              </Heading>
            </Text>
            <Text className="wo-box-header-right flex gap-2">
              <SettingTools
                bucket={bucket}
                tableData={tableData}
                handlePaginatedRecords={handlePaginatedRecords}
              />
            </Text>
          </Text>
          <Text className="p-1 w-full overflow-auto table-responsive table-container mt-2">
            {loading ? (
              <MenusTableSkeleton />
            ) : (
              <TableView
                bucket={bucket}
                tableData={tableData}
                handlePaginatedRecords={handlePaginatedRecords}
              />
            )}
          </Text>
        </Text>
      </Text>
    </main>
  );
};

export default TableContainer;