declare const loadingCommandSource = "import React, { useCallback, useState } from 'react';\nimport { \n  Command, \n  CommandGroup, \n  CommandItem, \n  COMMAND_VARIANT, \n} from '@jtl-software/platform-ui-react';\nimport { detailedGroups } from '../constants';\n\ninterface ILoadingCommandProps {}\n\nconst LoadingCommand: React.FC<ILoadingCommandProps> = () => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [groups, setGroups] = useState<CommandGroup[]>(detailedGroups);\n\n  /**\n   * This function simulates the actual API call.\n   */\n  const fetchData = useCallback(async (query: string = '') => {\n    setIsLoading(true);\n\n    try {\n      await new Promise(resolve => setTimeout(resolve, 800));\n\n      // Stimulate filtering logic\n      if (query.trim()) {\n        const filteredResults = detailedGroups\n          .map(group => ({\n            ...group,\n            items: group.items.filter(\n              item => item.label.toLowerCase().includes(query.toLowerCase()) || item.value.toLowerCase().includes(query.toLowerCase()),\n            ),\n          }))\n          .filter(group => group.items.length > 0);\n\n        setGroups(filteredResults);\n      } else {\n        setGroups(detailedGroups);\n      }\n    } catch (error) {\n      console.error('API fetch error:', error);\n      setGroups([]);\n    } finally {\n      setIsLoading(false);\n    }\n  }, []);\n\n  const handleDebouncedValueChange = useCallback(\n    (value: string) => {\n      fetchData(value);\n    },\n    [fetchData],\n  );\n\n  return (\n    <Command\n      variant={COMMAND_VARIANT.SIMPLE}\n      onDebouncedValueChange={handleDebouncedValueChange}\n      groups={groups}\n      isLoading={isLoading}\n      showLoadingOnType={true}\n      placeholder=\"Type to search products...\"\n      shouldFilter={false}\n    />\n  );\n};\n\nexport default LoadingCommand;";
export default loadingCommandSource;