import React from "react";
import classNames from "classnames";
import { tokens } from "../../../style-dictionary/dist/tokens";
import { Chip } from "../../Chip";
import { IntegrationLogo } from "../../IntegrationLogo";

const sharedProps = {
  className: "inline-flex",
  style: {
    verticalAlign: "text-bottom",
  },
};

export const MarkdownDirectiveChipFront = ({
  children,
}: {
  children: string;
}) => {
  return (
    <Chip.Integration
      integration="front"
      className={classNames("uppercase", sharedProps.className)}
      style={sharedProps.style}
    >
      {children}
    </Chip.Integration>
  );
};

export const MarkdownDirectiveChipJira = ({
  children,
}: {
  children: string;
}) => {
  return (
    <Chip.Integration
      integration="jira"
      className={classNames("uppercase", sharedProps.className)}
      style={sharedProps.style}
    >
      {children}
    </Chip.Integration>
  );
};

export const MarkdownDirectiveChipSalesforce = ({
  children,
}: {
  children: string;
}) => {
  return (
    <Chip.Integration
      integration="salesforce"
      className={classNames("uppercase", sharedProps.className)}
      style={sharedProps.style}
    >
      {children}
    </Chip.Integration>
  );
};

export const MarkdownDirectiveChipServiceNow = ({
  children,
}: {
  children: string;
}) => {
  return (
    <Chip.Integration
      integration="service_now"
      className={classNames("uppercase", sharedProps.className)}
      style={sharedProps.style}
    >
      {children}
    </Chip.Integration>
  );
};

export const MarkdownDirectiveChipSlack = ({
  children,
}: {
  children: string;
}) => {
  return (
    <Chip.Integration
      integration="slack"
      className={classNames("uppercase", sharedProps.className)}
      style={sharedProps.style}
    >
      {children}
    </Chip.Integration>
  );
};

export const MarkdownDirectiveChipZendesk = ({
  children,
}: {
  children: string;
}) => {
  return (
    <Chip.Integration
      integration="zendesk"
      className={classNames("uppercase", sharedProps.className)}
      style={sharedProps.style}
    >
      {children}
    </Chip.Integration>
  );
};

export const MarkdownDirectiveChipConveyor = ({
  children,
}: {
  children?: string;
}) => {
  return (
    <Chip {...sharedProps}>
      <IntegrationLogo
        logo="conveyor"
        square
        width={13}
        color={tokens.color.gray[700]}
        className="flex-shrink-0"
      />
      {children || "Conveyor"}
    </Chip>
  );
};

export const MarkdownDirectiveChipInfo = ({
  children,
}: {
  children: string;
}) => {
  return <Chip {...sharedProps}>{children}</Chip>;
};