import { createIcon } from '../utils/create-icon';

export const XmarkCircleAnimatedIcon = createIcon((props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <defs>
      <animate
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-1`}
        attributeName="opacity"
        keyTimes="0;0.2;0.2166667;0.6833333;0.7;1"
        values="1;1;0;0;1;1"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0 0 0 0"
        calcMode="spline"
      />
      <animateTransform
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-1`}
        attributeName="transform"
        type="scale"
        additive="sum"
        keyTimes="0;0.15;0.4;0.6;0.8;1"
        values="1 1;1 1;0 0;0 0;1.04 1.04;1 1"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
        calcMode="spline"
      />
      <animate
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-2`}
        attributeName="d"
        attributeType="XML"
        keyTimes="0;0.15;0.4;0.6;0.8;1"
        values="M2.505 -2.505C2.505 -2.505 -2.505 2.505 -2.505 2.505M2.505 2.505C2.505 2.505 -2.505 -2.505 -2.505 -2.505 ;M3.54 -3.54C3.54 -3.54 -3.54 3.54 -3.54 3.54M3.54 3.54C3.54 3.54 -3.54 -3.54 -3.54 -3.54 ;M5.88 -5.88C5.88 -5.88 -5.88 5.88 -5.88 5.88M5.88 5.88C5.88 5.88 -5.88 -5.88 -5.88 -5.88 ;M5.88 -5.88C5.88 -5.88 -5.88 5.88 -5.88 5.88M5.88 5.88C5.88 5.88 -5.88 -5.88 -5.88 -5.88 ;M2.265 -2.265C2.265 -2.265 -2.265 2.265 -2.265 2.265M2.265 2.265C2.265 2.265 -2.265 -2.265 -2.265 -2.265 ;M2.505 -2.505C2.505 -2.505 -2.505 2.505 -2.505 2.505M2.505 2.505C2.505 2.505 -2.505 -2.505 -2.505 -2.505"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
        calcMode="spline"
      />{' '}
      <animateTransform
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-2`}
        attributeName="transform"
        type="rotate"
        additive="sum"
        keyTimes="0;0.15;0.4;0.6;0.8;1"
        values="0;-6;92;86;190;180"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
        calcMode="spline"
      />
    </defs>
    <g>
      <g>
        <path
          id={`${props.id}-layer-outline-stroke-1`}
          transform="translate(12 12)"
          stroke="currentColor"
          fill="none"
          strokeWidth="var(--v0-rt-symbol-icon-stroke, 2)"
          vectorEffect="non-scaling-stroke"
          strokeOpacity="1"
          d="M0 10.005C5.52 10.005 10.005 5.52 10.005 0C10.005 -5.52 5.52 -10.005 0 -10.005C-5.52 -10.005 -10.005 -5.52 -10.005 0C-10.005 5.52 -5.52 10.005 0 10.005z"
        />
        <path
          id={`${props.id}-layer-outline-stroke-2`}
          transform="translate(12 12)"
          stroke="currentColor"
          strokeLinecap="round"
          fill="none"
          strokeWidth="var(--v0-rt-symbol-icon-stroke, 2)"
          vectorEffect="non-scaling-stroke"
          strokeOpacity="1"
          d="M2.505 -2.505C2.505 -2.505 -2.505 2.505 -2.505 2.505M2.505 2.505C2.505 2.505 -2.505 -2.505 -2.505 -2.505"
        />
      </g>
    </g>
  </svg>
));