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

export const Line3AnimatedIcon = 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="d"
        attributeType="XML"
        keyTimes="0;0.1833333;0.5;1"
        values="M9 0C9 0 -9 0 -9 0 ;M9.27 0C9.27 0 -9.27 0 -9.27 0 ;M7.335 0C7.335 0 -7.335 0 -7.335 0 ;M9 0C9 0 -9 0 -9 0"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
        calcMode="spline"
      />
      <animateMotion
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-1`}
        keyTimes="0;0.1833333;0.5;0.8333333;1"
        path="M12 19 C12,19 12,21.1 12,21.1 C12,21.1 12,15.55 12,15.55 C12,15.55 12,19.75 12,19.75 C12,19.75 12,19 12,19 "
        keyPoints="0;0.17;0.61;0.94;1"
        keySplines="0.442 0 0.3 1;0.421 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-1`}
        attributeName="transform"
        type="scale"
        additive="sum"
        keyTimes="0;0.1833333;0.5;0.8333333;1"
        values="1 1;1.06 1.06;0.9 0.9;1.04 1.04;1 1"
        keySplines="0.442 0 0.3 1;0.421 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.5;1"
        values="M9 0C9 0 -9 0 -9 0 ;M9.885 0C9.885 0 -9.885 0 -9.885 0 ;M8.175 0C8.175 0 -8.175 0 -8.175 0 ;M9 0C9 0 -9 0 -9 0"
        keySplines="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="scale"
        additive="sum"
        keyTimes="0;0.15;0.5;1"
        values="1 1;1.06 1.06;0.9 0.9;1 1"
        keySplines="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-3`}
        attributeName="d"
        attributeType="XML"
        keyTimes="0;0.1166667;0.5;1"
        values="M9 0C9 0 -9 0 -9 0 ;M9.27 0C9.27 0 -9.27 0 -9.27 0 ;M7.335 0C7.335 0 -7.335 0 -7.335 0 ;M9 0C9 0 -9 0 -9 0"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1"
        calcMode="spline"
      />
      <animateMotion
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-3`}
        keyTimes="0;0.1166667;0.5;0.7666667;1"
        path="M12 5 C12,5 12,2.75 12,2.75 C12,2.75 12,8.45 12,8.45 C12,8.45 12,4.25 12,4.25 C12,4.25 12,5 12,5 "
        keyPoints="0;0.17;0.62;0.94;1"
        keySplines="0.4 0 0.3 1;0.4 0 0.295 1;0.4 0 0.295 1;0.4 0 0.295 1"
        calcMode="spline"
      />
      <animateTransform
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-3`}
        attributeName="transform"
        type="scale"
        additive="sum"
        keyTimes="0;0.1166667;0.5;0.7666667;1"
        values="1 1;1.06 1.06;0.9 0.9;1.04 1.04;1 1"
        keySplines="0.4 0 0.3 1;0.4 0 0.295 1;0.4 0 0.295 1;0.4 0 0.3 1"
        calcMode="spline"
      />
    </defs>
    <g
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      fill="none"
      strokeWidth="2"
      strokeOpacity="1"
    >
      <path
        id={`${props.id}-layer-outline-stroke-1`}
        d="M 21,19C 21,19,3,19,3,19"
      />
      <path
        transform=" translate(12, 12)"
        id={`${props.id}-layer-outline-stroke-2`}
        d=" M9 0C9 0 -9 0 -9 0 "
      />
      <path
        id={`${props.id}-layer-outline-stroke-3`}
        d="M 21,5C 21,5,3,5,3,5"
      />
    </g>
  </svg>
));