import * as React from 'react';

import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue } from '../../styles/variables';

import { Icon } from '../iconTypes';

const IconSync = ({ className = '', color = bdlBoxBlue, height = 137, title, width = 153 }: Icon) => (
    <AccessibleSVG
        className={`icon-sync ${className}`}
        height={height}
        title={title}
        viewBox="25 30 153 137"
        width={width}
    >
        <g fill="none" fillRule="evenodd" transform="translate(27 30)">
            <ellipse className="fill-color" cx="72.5" cy="134" fill={color} fillOpacity=".1" rx="32.5" ry="3" />
            <path
                className="fill-color"
                d="M94 1.134V.492a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.643a.5.5 0 0 1-.5.491.506.506 0 0 1-.5-.505v-.629a1.007 1.007 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-87.5 83.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629A1.007 1.007 0 0 1 6.134 86H5.49a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm128 15v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.643a.5.5 0 0 1 .491.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.007 1.007 0 0 1-.366-.366h-.643a.5.5 0 0 1-.491-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-24-81.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.643a.5.5 0 0 1-.5.491.506.506 0 0 1-.5-.505v-.629a1.007 1.007 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-80-2.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.643a.5.5 0 0 1 .491.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.643a.5.5 0 0 1-.5.491.506.506 0 0 1-.5-.505v-.629a1.007 1.007 0 0 1-.366-.366h-.643a.5.5 0 0 1-.491-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm99 18v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.643a.5.5 0 0 1 .491.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.643a.5.5 0 0 1-.5.491.506.506 0 0 1-.5-.505v-.629a1.007 1.007 0 0 1-.366-.366h-.643a.5.5 0 0 1-.491-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zM24.937 23.709v-.402a.313.313 0 0 1 .625 0v.402a.629.629 0 0 1 .23.229h.401c.17 0 .307.145.307.312a.308.308 0 0 1-.306.313h-.402a.629.629 0 0 1-.23.229v.401a.313.313 0 0 1-.625.004v-.406a.629.629 0 0 1-.229-.229h-.401A.313.313 0 0 1 24 24.25c0-.173.134-.312.306-.312h.402a.629.629 0 0 1 .23-.23zm-11.5 75v-.402a.313.313 0 0 1 .626 0v.401a.629.629 0 0 1 .228.23h.402c.17 0 .307.144.307.312a.308.308 0 0 1-.307.313h-.402a.629.629 0 0 1-.229.228v.403a.313.313 0 0 1-.624.003v-.406a.629.629 0 0 1-.23-.229h-.401a.313.313 0 0 1-.307-.312c0-.173.134-.313.307-.313h.402a.629.629 0 0 1 .229-.228zm107 8.5v-.402a.313.313 0 0 1 .626 0v.401a.629.629 0 0 1 .228.23h.403c.169 0 .306.144.306.312a.308.308 0 0 1-.306.313h-.403a.629.629 0 0 1-.228.228v.403a.313.313 0 0 1-.626.003v-.406a.629.629 0 0 1-.228-.229h-.403a.313.313 0 0 1-.306-.312c0-.173.134-.313.306-.313h.403a.629.629 0 0 1 .228-.228z"
                fill={color}
            />
            <path
                className="stroke-color"
                d="M1.003 55.737a2 2 0 0 1 .72-2.732L21.979 41.31c.952-.55 2.59-.736 3.633-.424l8.23 2.463c1.054.315 2.355 1.344 2.913 2.31l16.419 28.439a2 2 0 0 1-.728 2.738l-27.713 16a2.003 2.003 0 0 1-2.735-.737L1.003 55.737z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M34.928 44.928l-5.81 3.354a1.294 1.294 0 0 1-1.764-.473L24 42"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="fill-color"
                d="M14.5 65.866a1.003 1.003 0 0 1 .359-1.362l15.603-9.008a.993.993 0 0 1 1.359.37 1.003 1.003 0 0 1-.36 1.362L15.86 66.236a.993.993 0 0 1-1.359-.37zm2.5 4.33a1.003 1.003 0 0 1 .359-1.362l15.603-9.008a.993.993 0 0 1 1.359.37 1.004 1.004 0 0 1-.36 1.362L18.36 70.566a.993.993 0 0 1-1.359-.37zm2.5 4.33a1.006 1.006 0 0 1 .368-1.367l8.656-4.997a.999.999 0 0 1 1.368.364 1.006 1.006 0 0 1-.368 1.368l-8.656 4.997a.999.999 0 0 1-1.368-.365zm11.778-6.8a1 1 0 0 1 .374-1.37l1.716-.991a1 1 0 1 1 1 1.732l-1.716.99a1.002 1.002 0 0 1-1.374-.36z"
                fill={color}
            />
            <path
                className="stroke-color"
                d="M35.348 25.227a2 2 0 0 1 1.612-2.321l23.033-4.062c1.083-.19 2.686.195 3.559.844l6.89 5.13c.884.657 1.755 2.069 1.948 3.167l5.702 32.34a2 2 0 0 1-1.62 2.323l-31.515 5.557a2.003 2.003 0 0 1-2.317-1.628l-7.292-41.35z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M71.268 25.878l-6.606 1.165a1.294 1.294 0 0 1-1.497-1.048L62 19.39"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M79.64 19.976a2 2 0 0 1 2.308-1.63l23.033 4.06c1.082.192 2.457 1.102 3.055 2.011l4.721 7.177c.605.92.94 2.544.747 3.642l-5.702 32.34a2 2 0 0 1-2.318 1.63l-31.515-5.558a2.003 2.003 0 0 1-1.62-2.323l7.29-41.35z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M112.879 33.268l-6.607-1.165a1.294 1.294 0 0 1-1.047-1.497L106.389 24"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <ellipse className="stroke-color" cx="94" cy="43" rx="9" ry="9" stroke={color} strokeWidth="2" />
            <path
                className="stroke-color"
                d="M116.997 37.737a2 2 0 0 1 2.727-.742l20.254 11.694c.952.55 1.933 1.876 2.184 2.934l1.982 8.36c.254 1.07.013 2.711-.544 3.677l-16.42 28.439a2 2 0 0 1-2.735.738l-27.713-16a2.003 2.003 0 0 1-.729-2.737l20.994-36.363z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="stroke-color"
                d="M143.928 61.928l-5.81-3.354a1.294 1.294 0 0 1-.472-1.765L141 51"
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <g className="stroke-color" fill="#FFF" stroke={color} strokeWidth="2">
                <path d="M117.783 52.023l4.343 2.507-2.5 4.33-4.343-2.507zm-2.5 4.33l4.343 2.507-2.5 4.33-4.343-2.507z" />
                <path d="M112.783 60.683l4.343 2.507-2.5 4.33-4.343-2.507zm9.343-6.153l13.856 8-2.5 4.33-13.857-8z" />
                <path d="M119.626 58.86l13.856 8-2.5 4.33-13.857-8zm-2.5 4.33l13.856 8-2.5 4.33-13.857-8z" />
            </g>
            <path
                className="stroke-color"
                d="M32 52.506c0-.832.678-1.506 1.498-1.506h28.066c.828 0 1.797.605 2.163 1.347l3.109 6.306c.367.744-.013 1.347-.839 1.347H33.503c-.83 0-1.503-.676-1.503-1.506v-5.988z"
                fill="#FFF"
                stroke={color}
                strokeWidth="2"
            />
            <path
                className="fill-color"
                d="M33.787 54.925c0-.823.668-1.49 1.494-1.49h25.164c.825 0 1.751.62 2.07 1.385l2.87 6.9c.317.766-.097 1.387-.933 1.387H35.296a1.498 1.498 0 0 1-1.509-1.49v-6.692z"
                fill={color}
                fillOpacity=".1"
            />
            <rect
                className="stroke-color"
                fill="#FFF"
                height="54"
                rx="1.5"
                stroke={color}
                strokeWidth="2"
                width="80"
                x="32"
                y="57"
            />
            <path
                className="fill-color"
                d="M34 96.214c0-.827.657-1.34 1.475-1.185 0 0 3.614 1.268 23.858 1.268 12.585 0 18.165 3.312 25.334 3.312 14.499 0 23.954-4.331 23.954-4.331.762-.31 1.38.115 1.38.936v10.284c0 .827-.681 1.497-1.502 1.497H35.501A1.503 1.503 0 0 1 34 106.498V96.214z"
                fill={color}
                fillOpacity=".1"
            />
            <circle
                className="stroke-color"
                cx="72"
                cy="81"
                r="12"
                stroke={color}
                strokeDasharray="4"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
            <path
                className="stroke-color fill-color"
                d="M73 82v-6h-2v6h-3l4 4 4-4h-3zM58.525 43.968l-6.616-6.926-4.346 9.905 11.817-2.084-.004-.005 6.51-1.148-4.947-5.017-2.414 5.275zm.141-8.896a.5.5 0 1 1-.174-.985.5.5 0 0 1 .174.985zm37.794 8.577L92 45.909 93.042 40l3.418 3.649z"
                fill={color}
                stroke={color}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
            />
        </g>
    </AccessibleSVG>
);

export default IconSync;
