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

export const PencilAnimatedIcon = createIcon((props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <defs>
      <animateMotion
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-1`}
        keyTimes="0;0.15;0.6;0.8;1"
        path="M-9.105 9.105C-9.105 9.105 -10.5 9.105 -10.5 9.105C-10.5 9.105 10.5 9.105 10.5 9.105C10.5 9.105 -10.5 9.105 -10.5 9.105C-10.5 9.105 -9.105 9.105 -9.105 9.105"
        keyPoints="0;0.03;0.5;0.97;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"
        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.6666667;1"
        values="1 1;0.8 0.8;0.8 0.8;1 1"
        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-1`}
        attributeName="transform"
        type="rotate"
        additive="sum"
        keyTimes="0;0.15;0.6;0.8;1"
        values="0;8;-70;8;0"
        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-1`}
        attributeName="transform"
        type="translate"
        additive="sum"
        keyTimes="0;1"
        values="9.107 -9.106;9.107 -9.106"
        keySplines="0 0 1 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.6;0.8;1"
        values="M0 0C0 0 0 0 0 0 ;M0 0C0 0 0 0 0 0 ;M6.48 0C6.48 0 20.865 0 20.865 0 ;M20.865 0C20.865 0 20.865 0 20.865 0 ;M20.865 0C20.865 0 20.865 0 20.865 0"
        keySplines="0.4 0 0.3 1;0.4 0 0.3 1;0.4 0 0.3 1;0 0 0 0"
        calcMode="spline"
      />
      <animate
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-2`}
        attributeName="opacity"
        keyTimes="0;0.15;0.1500017;0.8;0.8;1"
        values="0;0;1;1;0;0"
        calcMode="linear"
      />
    </defs>
    <g
      stroke="currentColor"
      strokeLinecap="round"
      fill="none"
      strokeWidth="2"
      strokeOpacity="1"
    >
      <path
        id={`${props.id}-layer-outline-stroke-1`}
        transform="translate(12 12)"
        strokeLinejoin="round"
        d="M5.355 -1.35C5.355 -1.35 1.35 -5.355 1.35 -5.355M-1.605 6.6C-1.605 6.6 8.235 -3.225 8.235 -3.225C9.405 -4.395 9.405 -6.3 8.235 -7.47C8.235 -7.47 7.47 -8.22 7.47 -8.22C6.3 -9.405 4.395 -9.405 3.225 -8.22C3.225 -8.22 -6.6 1.605 -6.6 1.605C-6.96 1.965 -7.23 2.415 -7.365 2.895C-7.365 2.895 -9.105 8.985 -9.105 8.985C-9.12 9.06 -9.06 9.12 -8.985 9.105C-8.985 9.105 -2.895 7.365 -2.895 7.365C-2.415 7.23 -1.965 6.96 -1.605 6.6z"
      />
      <path
        id={`${props.id}-layer-outline-stroke-2`}
        transform="translate(1.491 21.161)"
        d="M2.1 -0.6C2.1 -0.6 2.1 -0.6 2.1 -0.6"
      />
    </g>
  </svg>
));