https://assets.picaos.com/logos/{platform}.svg

GET https://api.picaos.com/v1/available-connectors?limit=300
Headers:
  x-pica-secret: YOUR_PICA_SECRET_KEY

{
  "rows": [
    {
      "platform": "gmail",
      "name": "Gmail",
      "category": "Communication",
      "image": "https://assets.picaos.com/logos/gmail.svg",
      "description": "..."
    },
    {
      "platform": "slack",
      "name": "Slack",
      "category": "Communication",
      "image": "https://assets.picaos.com/logos/slack.svg",
      "description": "..."
    }
  ],
  "total": 200,
  "pages": 1,
  "page": 1
}

interface Integration {
  platform: string;
  name: string;
  image: string;
  category: string;
}

async function getIntegrations(): Promise<Integration[]> {
  const response = await fetch(
    "https://api.picaos.com/v1/available-connectors?limit=300",
    {
      headers: {
        "x-pica-secret": process.env.PICA_SECRET_KEY,
      },
    }
  );

  if (!response.ok) {
    throw new Error(`Failed to fetch integrations: ${response.status}`);
  }

  const data = await response.json();
  return data.rows;
}

function getIntegrationLogo(platform: string): string {
  return `https://assets.picaos.com/logos/${platform}.svg`;
}

// Usage
const gmailLogo = getIntegrationLogo("gmail");
// => "https://assets.picaos.com/logos/gmail.svg"

function IntegrationCard({ integration }) {
  const [imgError, setImgError] = useState(false);

  return (
    <div className="integration-card">
      {!imgError ? (
        <img
          src={integration.image}
          alt={integration.name}
          onError={() => setImgError(true)}
        />
      ) : (
        <div className="fallback-icon">
          {integration.name.charAt(0).toUpperCase()}
        </div>
      )}
      <span>{integration.name}</span>
    </div>
  );
}

function getIntegrationLogo(platform: string, primaryUrl?: string): string {
  // Use API-provided URL if available
  if (primaryUrl) {
    return primaryUrl;
  }

  // Construct from pattern
  return `https://assets.picaos.com/logos/${platform}.svg`;
}

function getFallbackLogo(platform: string): string {
  // SimpleIcons as fallback
  return `https://cdn.simpleicons.org/${platform}`;
}

let cachedIntegrations: Integration[] | null = null;
let cacheTime: number = 0;
const CACHE_DURATION = 60 * 60 * 1000; // 1 hour

async function getIntegrationsCached(): Promise<Integration[]> {
  const now = Date.now();

  if (cachedIntegrations && now - cacheTime < CACHE_DURATION) {
    return cachedIntegrations;
  }

  cachedIntegrations = await getIntegrations();
  cacheTime = now;

  return cachedIntegrations;
}

GET https://api.picaos.com/v1/available-connectors?authkit=true&limit=300

https://assets.picaos.com/logos/{platform}.svg