import { createColumnHelper } from '@tanstack/react-table';
import DataTable from '../common/DataTable';
import { HStack, IconButton } from '@chakra-ui/react';
import { DeleteIcon, EditIcon } from '@chakra-ui/icons';

const ScrapingDataTable = ({ data, onEdit, pagination }) => {
  const columnHelper = createColumnHelper();

  // Get the keys from the first item in the array to use as column headers
  const columns = Object.keys(data[0] || []).map((key) => {
    return columnHelper.accessor(key, {
      header: key,
    });
  });

  columns.push(
    columnHelper.accessor('', {
      header: 'Actions',
      cell: (info) => <IconButton onClick={() => onEdit(info.row.original)} icon={<EditIcon />} />,
    }),
  );

  return <DataTable columns={columns} data={data} pagination={pagination} />;
};

export default ScrapingDataTable;
