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

export const XmarkAnimatedIcon = createIcon((props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <defs>
      <animateTransform
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke`}
        attributeName="transform"
        type="rotate"
        additive="sum"
        keyTimes="0;0.15;0.5;0.8;1"
        values="0;-6;100;86;90"
        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"
        calcMode="spline"
      />
      <animateTransform
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke`}
        attributeName="transform"
        type="scale"
        additive="sum"
        keyTimes="0;0.15;0.5;1"
        values="1 1;0.9 0.9;1.08 1.08;1 1"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
        calcMode="spline"
      />
    </defs>
    <g id={`${props.id}-layer-outline-stroke`} transform=" translate(12 , 12)">
      <path
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="var(--v0-rt-symbol-icon-stroke, 2)"
        vectorEffect="non-scaling-stroke"
        strokeOpacity="1"
        fill="none"
        d="M 6,-6C 6,-6,-6,6,-6,6M -6,-6C -6,-6,6,6,6,6"
      />
    </g>
  </svg>
));