import classnames from 'classnames';
import {FC} from 'react';
import uniqueId from 'lodash/uniqueId';

interface SpinnerProps {
  className?: string;
}

const Spinner: FC<SpinnerProps> = ({className}: SpinnerProps) => {
  const id = uniqueId();
  const maskID = `icon--spinner__mask-id--${id}`;

  return (
    <svg className={classnames('icon', 'icon--spinner', className)} viewBox="0 0 128 128">
      <defs>
        <mask id={maskID} x="0" y="0" width="128" height="128" maskUnits="userSpaceOnUse">
          <image
            width="128"
            height="128"
            xlinkHref="data:image/png;base64,[encoded data, 8740 characters]"
          />
        </mask>
      </defs>
      <path
        className="icon--spinner__ring"
        style={{mask: `url(#${maskID})`}}
        d="M64,2.34A61.66,61.66,0,1,0,125.66,64,61.66,61.66,0,0,0,64,2.34ZM64,111.9A47.9,47.9,0,1,1,111.9,64,47.9,47.9,0,0,1,64,111.9Z"
      />
    </svg>
  );
};

Spinner.defaultProps = {
  className: undefined,
};

export default Spinner;
