const PlusIcon = ({ className }) => (
  <svg
    className={className}
    width="50"
    height="50"
    viewBox="0 0 32 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g filter="url(#filter0_d)">
      <path
        d="M2 10C2 5.58172 5.58172 2 10 2H21.5236C25.9419 2 29.5236 5.58172 29.5236 10C29.5236 14.4183 25.9419 18 21.5236 18H10C5.58173 18 2 14.4183 2 10Z"
        fill="#D2D2D2"
      />
    </g>
    <path
      d="M20.3384 10.7143H16.3362V15H15.0022V10.7143H11V9.28571H15.0022V5H16.3362V9.28571H20.3384V10.7143Z"
      fill="#7D7D7D"
    />
    <defs>
      <filter
        id="filter0_d"
        x="0"
        y="0"
        width="31.5236"
        height="20"
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity="0" result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation="1" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
        />
        <feBlend
          mode="normal"
          in2="BackgroundImageFix"
          result="effect1_dropShadow"
        />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="effect1_dropShadow"
          result="shape"
        />
      </filter>
    </defs>
  </svg>
);

export default PlusIcon;
