import React from "react";

import { uniqueId } from "lodash";

const EmptyIntegrations = () => {
  const filterId = uniqueId("filter-");

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="322"
      height="150"
      fill="none"
    >
      <path
        fill="#F1F0FF"
        d="M162.5 150c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75Z"
      />
      <g filter={`url(#${filterId})`}>
        <path
          fill="#fff"
          d="M21 43a8 8 0 0 1 8-8h263a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H29a8.001 8.001 0 0 1-8-8V43Z"
        />
        <path
          stroke="#C5C7D1"
          d="M29 34.5a8.5 8.5 0 0 0-8.5 8.5v64a8.502 8.502 0 0 0 8.5 8.5h263a8.504 8.504 0 0 0 7.853-5.247A8.504 8.504 0 0 0 300.5 107V43a8.5 8.5 0 0 0-8.5-8.5H29Z"
        />
      </g>
      <path
        fill="#C5C7D1"
        d="M167 78H72a3 3 0 1 0 0 6h95a3 3 0 1 0 0-6ZM48 78H31a3 3 0 1 0 0 6h17a3 3 0 1 0 0-6ZM48 97H31a3 3 0 1 0 0 6h17a3 3 0 1 0 0-6Z"
      />
      <path
        fill="#E2E4EA"
        d="M160 97H72a3 3 0 1 0 0 6h88a3 3 0 1 0 0-6ZM238 97h-54a3 3 0 1 0 0 6h54a3 3 0 1 0 0-6ZM223 78h-37a3 3 0 1 0 0 6h37a3 3 0 1 0 0-6Z"
      />
      <path
        fill="#F9FAFC"
        stroke="#C5C7D1"
        d="M300 65.5h.5V43a8.5 8.5 0 0 0-8.5-8.5H29a8.5 8.5 0 0 0-8.5 8.5v22.5H300Z"
      />
      <path
        fill="#8B8FA2"
        d="M72.7 53.1c-.967 0-1.707-.25-2.22-.75-.507-.507-.76-1.253-.76-2.24v-4.16H71v4.15c0 .633.143 1.11.43 1.43.293.313.717.47 1.27.47 1.127 0 1.69-.633 1.69-1.9v-4.15h1.27v4.16c0 .987-.25 1.733-.75 2.24-.5.5-1.237.75-2.21.75Zm4.453-.1v-7.05h3.06c.773 0 1.37.187 1.79.56.42.367.63.883.63 1.55 0 .527-.137.963-.41 1.31-.273.34-.667.57-1.18.69.34.107.62.363.84.77l1.18 2.17h-1.41l-1.22-2.25c-.12-.22-.264-.37-.43-.45-.16-.08-.367-.12-.62-.12h-.95V53h-1.28Zm1.28-3.77h1.56c.933 0 1.4-.38 1.4-1.14 0-.753-.467-1.13-1.4-1.13h-1.56v2.27ZM84.008 53v-7.05h1.28v5.96h3.38V53h-4.66ZM30.47 53v-5.98h-2.42v-1.07h6.12v1.07h-2.42V53h-1.28Zm4.177 1.8.9-2-2.03-4.69h1.33l1.37 3.42 1.4-3.42h1.26l-2.94 6.69h-1.29Zm4.823 0v-6.69h1.22v.78c.14-.267.35-.48.63-.64.287-.16.61-.24.97-.24.427 0 .8.103 1.12.31.327.207.58.5.76.88.18.373.27.823.27 1.35 0 .52-.09.973-.27 1.36-.18.38-.43.673-.75.88-.32.207-.696.31-1.13.31-.346 0-.66-.073-.94-.22a1.632 1.632 0 0 1-.63-.61v2.53h-1.25Zm2.47-2.65c.374 0 .674-.133.9-.4.227-.273.34-.673.34-1.2 0-.533-.113-.93-.34-1.19-.226-.267-.526-.4-.9-.4-.373 0-.673.133-.9.4-.226.26-.34.657-.34 1.19 0 .527.114.927.34 1.2.227.267.527.4.9.4Zm5.936.95c-.553 0-1.03-.103-1.43-.31-.4-.207-.71-.5-.93-.88-.213-.38-.32-.83-.32-1.35 0-.507.104-.95.31-1.33.214-.38.504-.677.87-.89.374-.22.797-.33 1.27-.33.694 0 1.24.22 1.64.66.407.44.61 1.04.61 1.8v.37h-3.5c.094.873.594 1.31 1.5 1.31.274 0 .547-.04.82-.12a2.33 2.33 0 0 0 .75-.4l.35.84c-.261.208-.56.364-.88.46-.353.113-.706.17-1.06.17Zm-.18-4.24c-.366 0-.663.113-.89.34-.226.227-.363.533-.41.92h2.46c-.026-.407-.14-.717-.34-.93-.193-.22-.466-.33-.82-.33ZM183.77 53v-7.05h1.28v3.12h.02l3.11-3.12h1.56l-3.43 3.39 3.6 3.66h-1.58l-3.26-3.26h-.02V53h-1.28Zm8.804.1c-.554 0-1.03-.103-1.43-.31-.4-.207-.71-.5-.93-.88-.214-.38-.32-.83-.32-1.35 0-.507.103-.95.31-1.33a2.32 2.32 0 0 1 .87-.89c.373-.22.796-.33 1.27-.33.693 0 1.24.22 1.64.66.406.44.61 1.04.61 1.8v.37h-3.5c.093.873.593 1.31 1.5 1.31.273 0 .546-.04.82-.12.273-.087.523-.22.75-.4l.35.84c-.261.208-.56.364-.88.46-.342.111-.7.169-1.06.17Zm-.18-4.24c-.367 0-.664.113-.89.34-.227.227-.364.533-.41.92h2.46c-.027-.407-.14-.717-.34-.93-.194-.22-.467-.33-.82-.33Zm3.551 5.94.9-2-2.03-4.69h1.33l1.37 3.42 1.4-3.42h1.26l-2.94 6.69h-1.29Zm7.609-1.09-.94-.28 2.59-8.03.94.28-2.59 8.03Zm5.861-.71v-7.05h1.28V53h-1.28Zm2.812 0v-7.05h2.62c1.18 0 2.09.303 2.73.91.647.607.97 1.477.97 2.61 0 1.127-.323 1.997-.97 2.61-.64.613-1.55.92-2.73.92h-2.62Zm1.28-1.06h1.26c1.627 0 2.44-.823 2.44-2.47 0-1.64-.813-2.46-2.44-2.46h-1.26v4.93Z"
      />
      <defs>
        <filter
          id={filterId}
          width={287}
          height={92}
          x={17}
          y={34}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={7} />
          <feGaussianBlur stdDeviation={1.5} />
          <feColorMatrix values="0 0 0 0 0.0980392 0 0 0 0 0.129412 0 0 0 0 0.278431 0 0 0 0.1 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_121_198"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_121_198"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  );
};

export default EmptyIntegrations;
