import React from "react";
import { SvgProps } from "../Svg";
import IntegrationLogoSvg from "./IntegrationLogoSvg";

export const integrationLogoNames = [
  "addigy",
  "aws",
  "bamboohr",
  "bitbucket",
  "conveyor",
  "deploy",
  "events-api",
  "gcp",
  "github",
  "gitlab",
  "gsuite",
  "jamf",
  "jira",
  "jumpcloud",
  "okta",
  "onelogin",
  "salesforce",
  "slack",
  "zoom",
] as const;

export type IntegrationLogoName = typeof integrationLogoNames[number];

export interface IntegrationLogoProps extends SvgProps {
  /**
   * If the value passed to `logo` doesn't match an existing logo, a default logo will be returned.
   */
  logo?: IntegrationLogoName | string;
  /**
   * Replaces the default color of the logo
   */
  color?: string;
  /**
   * If true, the logo height and width will both be set by the `size` prop
   */
  square?: boolean;
  /**
   * When used with `square` prop, `size` will set both the height and width (in px). Otherwise, it will just affect the height.
   */
  size?: number;
}

export const IntegrationLogo = ({
  logo,
  size = 24,
  ...rest
}: IntegrationLogoProps) => {
  return <IntegrationLogoSvg logo={logo} size={size} {...rest} />;
};