import React from 'react'

type Icon = 'spinner' | 'warning'

type Props = {
  fill?: string
  size?: number
  icon: Icon
}

export const IconsSvg = ({ fill, size, icon }: Props) => {
  switch (icon) {
    case 'spinner':
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width={`${size || 25}`}
          height={`${size || 25}`}
          viewBox="0 0 24 24"
        >
          <style>
            {`
      .spinner_z9k8 {
      transform-origin: center;
      animation: spinner_StKS .75s infinite linear;
      }
      @keyframes spinner_StKS {
      100% {
      transform: rotate(360deg);
      }
      }
      `}
          </style>
          <path
            d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
            opacity=".25"
            fill={fill}
          />
          <path
            d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
            className="spinner_z9k8"
            fill={fill}
          />
        </svg>
      )
    case 'warning':
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width={`${size || 25}`}
          height={`${size || 25}`}
          className="svg-icon"
          style={{
            verticalAlign: 'middle',
            fill: fill,
            overflow: 'hidden',
            minWidth: '25px',
            minHeight: '25px',
          }}
          viewBox="0 0 1024 1024"
          version="1.1"
        >
          <path d="M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" />
        </svg>
      )
    default:
      return null
  }
}