const ActionBar = <T,>({
  globalFilter,
  table,
  children,
  onClearFilterClick,
}: ActionBarProps<T>) => {
  const [searchText, setSearchText] = useState(globalFilter);
  const [debouncedSearchText] = useDebouncedValue(searchText, 500);
  const setGlobalFilter = table.setGlobalFilter;
  const setPageIndex = table.setPageIndex;

  useEffect(() => {
    setGlobalFilter(debouncedSearchText);
    if (debouncedSearchText !== "") {
      setPageIndex(0);
    }
  }, [debouncedSearchText, setGlobalFilter, setPageIndex]);

  return (
    <Group justify="space-between" h="2rem">
      <ActionBarButtons>{children}</ActionBarButtons>
      <Group>
        <Group align="center" gap="0.25rem">
          <Tooltip label="Delete Filters">
            <ActionIcon
              onClick={() => {
                table.setSorting([]);
                table.setGlobalFilter("");
                if (onClearFilterClick !== undefined) {
                  onClearFilterClick();
                }
              }}
              variant="subtle"
              color="dark"
            >
              <IconFilterOff />
            </ActionIcon>
          </Tooltip>
          <TextInput
            autoFocus
            leftSection={<IconSearch />}
            placeholder="Suchtext"
            value={searchText}
            onChange={(e) => {
              setSearchText(e.currentTarget.value);
            }}
          />
        </Group>
      </Group>
    </Group>
  );
};