import * as React from 'react';

function iconClassName(size: number) {
  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
}

export function Icon16Spinner({ children }: React.PropsWithChildren) {
  return (
    <svg className={iconClassName(16)} aria-hidden="true" width="16" height="16">
      <path
        fill="currentColor"
        d="M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z"
      >
        {children}
      </path>
    </svg>
  );
}

export function Icon24Spinner({ children }: React.PropsWithChildren) {
  return (
    <svg className={iconClassName(24)} aria-hidden="true" width="24" height="24">
      <path
        fill="currentColor"
        d="M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123"
      >
        {children}
      </path>
    </svg>
  );
}

export function Icon32Spinner({ children }: React.PropsWithChildren) {
  return (
    <svg className={iconClassName(32)} aria-hidden="true" width="32" height="32">
      <path
        fill="currentColor"
        d="M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16"
      >
        {children}
      </path>
    </svg>
  );
}

export function Icon44Spinner({ children }: React.PropsWithChildren) {
  return (
    <svg className={iconClassName(44)} aria-hidden="true" width="44" height="44">
      <path
        fill="currentColor"
        d="M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22"
      >
        {children}
      </path>
    </svg>
  );
}