  import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
  import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
  import { Button } from '@/components/ui/button';

  const ListToolbar = () => {
    const { table, reload } = useDataGrid();
    const { handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee} = useManageTransferFeeContext();

    return (
      <div className="card-header flex-wrap gap-2 border-b-0 px-5">
        <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
          <div className="flex justify-between w-full items-center">
            <div className="flex w-[50%] gap-3 items-center">
              <label className="input input-sm w-1/3">
                <KeenIcon icon="magnifier" />
                <input
                  type="text"
                  placeholder="Search Access Type"
                  value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                  onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
                />
              </label>
            </div>
            <div className="flex gap-3 items-center">
              <Button
                variant="outline"
                className="h-7.5 text-[0.8rem]"
                onClick={() => handleAddFeeDialog(true)}
              >
                Add Data
              </Button>
              <DefaultTooltip title={'Refresh'} placement={'top'}>
                <Button variant="outline" className="h-7.5" onClick={() => reload()}>
                  <KeenIcon icon="arrows-circle" />
                </Button>
              </DefaultTooltip>
            </div>
          </div>
        </div>
      </div>
    );
  };

  export default ListToolbar;
