import React from "react";
import { IntegrationLogoSvgWrapper, SvgLogoProps } from "./wrapper";
import { colors } from "../../../tokens";

export const DeploySvg = ({
  color = colors.gold["400"],
  square,
  ...rest
}: SvgLogoProps) => {
  const viewBox = square ? "0 0 32 32" : "0 0 32 28";
  const path = square ? (
    <path
      fill={color}
      d="M32 22.9362V29.3368L22.3991 19.7359V29.6124H17.5994V8.53555L32 22.9362ZM22.3991 2.39999H16L32 18.4V11.9964L22.3991 2.39999ZM14.3991 8.52646L0 22.9271V29.3262L9.59636 19.7207V29.6064H14.3961V8.52646H14.3991ZM0 11.9964V18.3954L16 2.39999H9.54033L0 11.9964Z"
    />
  ) : (
    <path
      fill={color}
      d="M32 20.5362V26.9368L22.3991 17.3359V27.2124H17.5994V6.13555L32 20.5362ZM22.3991 0H16L32 16V9.59636L22.3991 0ZM14.3991 6.12647L0 20.5271V26.9262L9.59636 17.3207V27.2064H14.3961V6.12647H14.3991ZM0 9.59636V15.9955L16 0H9.54033L0 9.59636Z"
    />
  );

  return (
    <IntegrationLogoSvgWrapper viewBox={viewBox} {...rest}>
      <title>Aptible Deploy integration logo</title>
      {path}
    </IntegrationLogoSvgWrapper>
  );
};