import React from 'react';

const Spinner = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
  <svg
    width={width}
    height={width}
    viewBox={viewBox}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <g fillRule="evenodd" clipPath="url(#clip0_873_270630)" clipRule="evenodd">
      <path
        fill={fill}
        d="M11.529 26.36h-6.28c-1.3 0-2.36-1.06-2.36-2.36 0-1.3 1.06-2.36 2.36-2.36h6.28c1.3 0 2.36 1.06 2.36 2.36 0 1.3-1.06 2.36-2.36 2.36zM17.109 31.78c.92.92.92 2.41 0 3.33l-4.44 4.45c-.92.92-2.42.92-3.34 0-.92-.92-.92-2.42 0-3.34l4.45-4.44c.92-.92 2.41-.92 3.33 0zM17.109 12.89a2.354 2.354 0 11-3.33 3.33l-4.45-4.44c-.92-.92-.92-2.42 0-3.34.92-.92 2.42-.92 3.34 0l4.44 4.45z"
      ></path>
      <path
        fill="#3E63DD"
        d="M27.249 4.36v6.28c0 1.3-1.06 2.36-2.36 2.36-1.3 0-2.36-1.06-2.36-2.36V4.36c0-1.3 1.06-2.36 2.36-2.36 1.3 0 2.36 1.06 2.36 2.36z"
      ></path>
      <path
        fill={fill}
        d="M27.249 37.36v6.28c0 1.3-1.06 2.36-2.36 2.36-1.3 0-2.36-1.06-2.36-2.36v-6.28c0-1.3 1.06-2.36 2.36-2.36 1.3 0 2.36 1.06 2.36 2.36zM40.449 36.22c.92.92.92 2.42 0 3.34-.92.92-2.42.92-3.34 0l-4.44-4.45a2.354 2.354 0 113.33-3.33l4.45 4.44z"
      ></path>
      <path
        fill="#3E63DD"
        d="M32.669 16.22c-.92-.92-.92-2.41 0-3.33l4.44-4.45c.92-.92 2.42-.92 3.34 0 .92.92.92 2.42 0 3.34l-4.45 4.44c-.92.92-2.41.92-3.33 0zM46.889 24c0 1.3-1.06 2.36-2.36 2.36h-6.28c-1.3 0-2.36-1.06-2.36-2.36 0-1.3 1.06-2.36 2.36-2.36h6.28c1.3 0 2.36 1.06 2.36 2.36z"
      ></path>
    </g>
    <defs>
      <clipPath id="clip0_873_270630">
        <path fill="#fff" d="M0 0H44V44H0z" transform="translate(2.889 2)"></path>
      </clipPath>
    </defs>
  </svg>
);

export default Spinner;
