import { motion } from 'framer-motion';
import { AnimationVariations } from '..';

interface Props {
  variant: AnimationVariations;
}

const CapabilitiesArrows = (props: Props) => {
  const { variant } = props;

  const variants = {
    default: {
      pathLength: 0,
      transition: {
        duration: 2,
      },
    },
    show: {
      pathLength: 1,
      transition: {
        duration: 2,
      },
    },
  };

  return (
    <svg
      version="1.1"
      id="Layer_1"
      xmlns="http://www.w3.org/2000/svg"
      x="0px"
      y="0px"
      viewBox="0 0 600.2 428.4"
      xmlSpace="preserve"
    >
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-1_00000034767970555764574630000010567432661925367482_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="236.4493,236.4493"
        d="M415.9,208.7l32.9-80.2l23.4-21.1"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-2_00000030462481983940331560000010824857382310781324_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="303.9572,303.9572"
        d="M439.3,187.6l-23.4,21.1l62.7,88.8"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-4_00000182529636134279192970000004117380947117394329_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="495.3369,495.3369"
        d="M356.3,390.2l-23.4,21.1l214-30.3l23.4-21.1"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-5_00000129166057067587858660000002464961435108534688_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="236.4511,236.4511"
        d="M332.9,411.4l32.9-80.2l23.4-21.1"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-7_00000058552897246333349260000010535157655450851996_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="217.0089,217.0089"
        d="M136,396.8l70.4,31l23.4-21.1"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-8_00000041261771708171610690000013464181953847662758_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="947.858,947.858"
        d="M393.8,0.5l-23.4,21.1L139.2,392l-3.2,4.8 l23.4-21.1"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-9_00000068639577770480816870000013733789733387679146_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="218.2848,218.2848"
        d="M53.3,47.4L29.9,68.5L0.5,140.3"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-11_00000044165235901786481560000003047246397467017610_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="267.2966,267.2966"
        d="M121.6,131l89.5-12.6l23.4-21.1"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Fill-12_00000167360173971937661090000000583607085749896593_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="505.5347,505.5347"
        d="M23.9,119.2L0.5,140.3L128,321.1l23.4-21.1"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="_x3E_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="942.4289,942.4289"
        d="M439.3,187.6l74.2,105L389.2,310l-32.9,80.2l214-30.3l29.4-71.8L472.2,107.4L439.3,187.6z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="_x2F_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="1038.7532,1038.7532"
        d="M393.8,0.5L159.4,375.7l70.4,31L464.2,31.6L393.8,0.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="_x3C_"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="942.4231,942.4231"
        d="M267.3,17.1l-32.9,80.2l-124.3,17.5l74.2,105L151.4,300L23.9,119.2l29.4-71.8L267.3,17.1z"
      />
    </svg>
  );
};

export default CapabilitiesArrows;