import { P as e } from "../../../../packageName-CJwD6mUt.js";
const t = `import React, { useCallback, useState } from 'react';
import { 
  Command, 
  CommandGroup, 
  CommandItem, 
  COMMAND_VARIANT, 
} from '${e}';
import { detailedGroups } from '../constants';

interface ILoadingCommandProps {}

const LoadingCommand: React.FC<ILoadingCommandProps> = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [groups, setGroups] = useState<CommandGroup[]>(detailedGroups);

  /**
   * This function simulates the actual API call.
   */
  const fetchData = useCallback(async (query: string = '') => {
    setIsLoading(true);

    try {
      await new Promise(resolve => setTimeout(resolve, 800));

      // Stimulate filtering logic
      if (query.trim()) {
        const filteredResults = detailedGroups
          .map(group => ({
            ...group,
            items: group.items.filter(
              item => item.label.toLowerCase().includes(query.toLowerCase()) || item.value.toLowerCase().includes(query.toLowerCase()),
            ),
          }))
          .filter(group => group.items.length > 0);

        setGroups(filteredResults);
      } else {
        setGroups(detailedGroups);
      }
    } catch (error) {
      console.error('API fetch error:', error);
      setGroups([]);
    } finally {
      setIsLoading(false);
    }
  }, []);

  const handleDebouncedValueChange = useCallback(
    (value: string) => {
      fetchData(value);
    },
    [fetchData],
  );

  return (
    <Command
      variant={COMMAND_VARIANT.SIMPLE}
      onDebouncedValueChange={handleDebouncedValueChange}
      groups={groups}
      isLoading={isLoading}
      showLoadingOnType={true}
      placeholder="Type to search products..."
      shouldFilter={false}
    />
  );
};

export default LoadingCommand;`;
export {
  t as default
};
//# sourceMappingURL=loadingCommandSource.js.map
