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

export const EyeAnimatedIcon = 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-large`}
        attributeName="strokeOpacity"
        keyTimes="0;0.6333333;0.65;0.7;0.7166667;1"
        values="1;1;0;0;1;1"
      />
      <animateMotion
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-large`}
        keyTimes="0;0.15;0.25;0.5;0.6;0.8;1"
        path="M 0.01,0C -0.06,0.54,-3.29,0.08,-3.29,0.08C -3.29,0.08,-3.29,0.08,-3.29,0.08C -3.29,0.08,3.27,0.08,3.27,0.08C 3.27,0.08,3.27,0.08,3.27,0.08C 3.27,0.08,0.01,0,0.01,0C 0.01,0,0.01,0,0.01,0"
        keyPoints="0;0.26;0.26;0.75;0.75;1;1"
        keySplines="0.4 0 0.3 1;0.4 0.4 0.3 0.3;0.4 0 0.3 1;0.4 0.4 0.3 0.3;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-large`}
        attributeName="transform"
        type="scale"
        additive="sum"
        keyTimes="0;0.15;0.6;1"
        values="1 1;1.1 1.1;1.1 1.1;1 1"
        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-0`}
        keyTimes="0;0.25;0.6;1"
        path="M 0,0C 0,0,-0.6,0,-0.6,0C -0.6,0,0.6,0,0.6,0C 0.6,0,0,0,0,0"
        keyPoints="0;0.25;0.75;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-0`}
        attributeName="transform"
        type="rotate"
        additive="sum"
        keyTimes="0;0.25;0.6;0.8;1"
        values="0;6;-6;1;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-0`}
        attributeName="transform"
        type="scale"
        additive="sum"
        keyTimes="0;0.25;0.6;1"
        values="1 1;0.9 0.9;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-1`}
        attributeName="strokeOpacity"
        keyTimes="0;0.5833332;0.5833333;0.5999998;0.6;0.7833332;0.7833333;0.7999998;0.8;1"
        values="1;1;1;1;0;0;0;0;1;1"
      />
      <animate
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-2`}
        attributeName="d"
        attributeType="XML"
        keyTimes="0;0.6;0.6666667;0.6833333;0.8;1"
        values="M0 6.5 C5.25,6.5 9,3 10.5,0 C9,-3 5.25,-6.5 0,-6.5 C-5.25,-6.5 -9,-3 -10.5,0 C-9,3 -5.25,6.5 0,6.5z ;M0 6.5 C5.25,6.5 9,3 10.5,0 C9,-3 5.25,-6.5 0,-6.5 C-5.25,-6.5 -9,-3 -10.5,0 C-9,3 -5.25,6.5 0,6.5z ;M0 0.13 C5.25,0.13 9,0.06 10.5,0 C9,-0.06 5.25,-0.13 0,-0.13 C-5.25,-0.13 -9,-0.06 -10.5,0 C-9,0.06 -5.25,0.13 0,0.13z ;M0 0.13 C5.25,0.13 9,0.06 10.5,0 C9,-0.06 5.25,-0.13 0,-0.13 C-5.25,-0.13 -9,-0.06 -10.5,0 C-9,0.06 -5.25,0.13 0,0.13z ;M0 6.5 C5.25,6.5 9,3 10.5,0 C9,-3 5.25,-6.5 0,-6.5 C-5.25,-6.5 -9,-3 -10.5,0 C-9,3 -5.25,6.5 0,6.5z ;M0 6.5 C5.25,6.5 9,3 10.5,0 C9,-3 5.25,-6.5 0,-6.5 C-5.25,-6.5 -9,-3 -10.5,0 C-9,3 -5.25,6.5 0,6.5z "
        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"
      />
      <animate
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke-2`}
        attributeName="strokeOpacity"
        additive="replace"
        keyTimes="0;0.6;0.6000017;0.8;0.8;1"
        values="0;0;1;1;0;0"
      />
    </defs>
    <g
      transform="translate(12, 12)"
      stroke="currentColor"
      strokeLinecap="round"
    >
      <path
        id={`${props.id}-layer-outline-stroke-large`}
        strokeWidth="var(--v0-rt-symbol-icon-stroke, 3)"
        vectorEffect="non-scaling-stroke"
        strokeOpacity="1"
        d="M0 0 C0,0 0,0 0,0"
      />
      <g id={`${props.id}-layer-outline-stroke-0`} fill="none" strokeWidth="2">
        <path
          id={`${props.id}-layer-outline-stroke-1`}
          strokeOpacity="1"
          d="M0 6.5 C5.25,6.5 9,3 10.5,0 C9,-3 5.25,-6.5 0,-6.5 C-5.25,-6.5 -9,-3 -10.5,0 C-9,3 -5.25,6.5 0,6.5z"
        />
        <path
          id={`${props.id}-layer-outline-stroke-2`}
          strokeLinejoin="round"
          strokeOpacity="0"
          d="m0"
        />
      </g>
    </g>
  </svg>
));