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

export const SlackSvg = ({ color, ...rest }: SvgLogoProps) => (
  <IntegrationLogoSvgWrapper viewBox="0 0 32 32" {...rest}>
    <title>Slack integration logo</title>
    <path
      fill={color || "#e01e5a"}
      d="M6.813 20.181c0 1.832-1.497 3.329-3.329 3.329s-3.329-1.497-3.329-3.329c0-1.832 1.497-3.329 3.329-3.329h3.329v3.329z"
    />
    <path
      fill={color || "#e01e5a"}
      d="M8.49 20.181c0-1.832 1.497-3.329 3.329-3.329s3.329 1.497 3.329 3.329v8.335c0 1.832-1.497 3.329-3.329 3.329s-3.329-1.497-3.329-3.329v-8.335z"
    />
    <path
      fill={color || "#36c5f0"}
      d="M11.819 6.813c-1.832 0-3.329-1.497-3.329-3.329s1.497-3.329 3.329-3.329c1.832 0 3.329 1.497 3.329 3.329v3.329h-3.329z"
    />
    <path
      fill={color || "#36c5f0"}
      d="M11.819 8.49c1.832 0 3.329 1.497 3.329 3.329s-1.497 3.329-3.329 3.329h-8.335c-1.832 0-3.329-1.497-3.329-3.329s1.497-3.329 3.329-3.329h8.335z"
    />
    <path
      fill={color || "#2eb67d"}
      d="M25.187 11.819c0-1.832 1.497-3.329 3.329-3.329s3.329 1.497 3.329 3.329c0 1.832-1.497 3.329-3.329 3.329h-3.329v-3.329z"
    />
    <path
      fill={color || "#2eb67d"}
      d="M23.51 11.819c0 1.832-1.497 3.329-3.329 3.329s-3.329-1.497-3.329-3.329v-8.335c0-1.832 1.497-3.329 3.329-3.329s3.329 1.497 3.329 3.329v8.335z"
    />
    <path
      fill={color || "#ecb22e"}
      d="M20.181 25.187c1.832 0 3.329 1.497 3.329 3.329s-1.497 3.329-3.329 3.329c-1.832 0-3.329-1.497-3.329-3.329v-3.329h3.329z"
    />
    <path
      fill={color || "#ecb22e"}
      d="M20.181 23.51c-1.832 0-3.329-1.497-3.329-3.329s1.497-3.329 3.329-3.329h8.335c1.832 0 3.329 1.497 3.329 3.329s-1.497 3.329-3.329 3.329h-8.335z"
    />
  </IntegrationLogoSvgWrapper>
);