{packagesLoaded ? (
                (packages || []).map((pkg: Package) => (
                  <CommandItem
                    key={pkg.name}
                    onSelect={() => handlePackageSelect(pkg)}
                  >
                    {pkg.name}
                    <span>{pkg.description}</span>{" "}
                  </CommandItem>
                ))
              ) : (
                <Label> Fetching packages... Please wait</Label>
              )}

interface Package {
  name: string; // Package name
  description: string; // Package description
  version: string;
  git: string;
  website: string;
  author: string;
  content: string;
}

  const fetchPackages = async () => {
    try {
      const response = await fetch("https://api.com/packages/");
      const data: Package[] = await response.json(); // Type the data as Package[]
      console.log("Fetched packages:", data);

      setPackages(data);
    } catch (error) {
      console.error("Error fetching packages:", error);
    }
  };