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

export const ChevronDownAnimatedIcon = 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`}
        attributeName="d"
        attributeType="XML"
        keyTimes="0;0.15;0.5;0.8;1"
        values="M7 -3.48 C7,-3.48 0.11,3.41 0.11,3.41 C0.07,3.45 0.05,3.47 0.03,3.47 C0.01,3.48 -0.01,3.48 -0.03,3.47 C-0.05,3.47 -0.07,3.45 -0.11,3.41 C-0.11,3.41 -7,-3.48 -7,-3.48 ;M7 -3.48 C7,-3.48 0.11,3.41 0.11,3.41 C0.07,3.45 0.05,3.47 0.03,3.47 C0.01,3.48 -0.01,3.48 -0.03,3.47 C-0.05,3.47 -0.07,3.45 -0.11,3.41 C-0.11,3.41 -7,-3.48 -7,-3.48 ;M6.48 -4.58 C6.48,-4.58 0.11,3.4 0.11,3.4 C0.07,3.44 0.05,3.46 0.03,3.47 C0.01,3.48 -0.01,3.48 -0.03,3.47 C-0.05,3.46 -0.07,3.44 -0.1,3.4 C-0.1,3.4 -6.48,-4.58 -6.48,-4.58 ;M7.44 -2.91 C7.44,-2.91 0.12,3.41 0.12,3.41 C0.08,3.45 0.06,3.47 0.03,3.48 C0.01,3.48 -0.01,3.48 -0.03,3.48 C-0.06,3.47 -0.08,3.45 -0.12,3.41 C-0.12,3.41 -7.44,-2.91 -7.44,-2.91 ;M7 -3.48 C7,-3.48 0.11,3.41 0.11,3.41 C0.07,3.45 0.05,3.47 0.03,3.47 C0.01,3.48 -0.01,3.48 -0.03,3.47 C-0.05,3.47 -0.07,3.45 -0.11,3.41 C-0.11,3.41 -7,-3.48 -7,-3.48 "
        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"
      />
      <animateMotion
        repeatCount="indefinite"
        dur="1s"
        begin="indefinite"
        href={`#${props.id}-layer-outline-stroke`}
        keyTimes="0;0.15;0.5;0.8;1"
        path="M 0,0C 0,0,0,-3,0,-3C 0,-3,0,4.5,0,4.5C 0,4.5,0,-1.5,0,-1.5C 0,-1.5,0,0,0,0"
        keyPoints="0;0.17;0.58;0.92;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`}
        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>
      <path
        transform=" translate(12, 9) translate(0, 3.479)"
        id={`${props.id}-layer-outline-stroke`}
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
        strokeWidth="var(--v0-rt-symbol-icon-stroke, 2)"
        vectorEffect="non-scaling-stroke"
        strokeOpacity="1"
        d=" M7 -3.48 C7,-3.48 0.11,3.41 0.11,3.41 C0.07,3.45 0.05,3.47 0.03,3.47 C0.01,3.48 -0.01,3.48 -0.03,3.47 C-0.05,3.47 -0.07,3.45 -0.11,3.41 C-0.11,3.41 -7,-3.48 -7,-3.48 "
      />
    </g>
  </svg>
));