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

interface Props {
  variant: AnimationVariations;
}

const CapabilitiesPointer = (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 453.1 600.8"
      xmlSpace="preserve"
    >
      <motion.path
        variants={variants}
        animate={variant}
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="1101.812,1101.812"
        id="left"
        d="M5.1,290.3l24.5,30.8c2.2,2.7,4.9,4.8,8.1,6.2l63.5,28.3"
      />
      <motion.path
        variants={variants}
        animate={variant}
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="643.189,643.189"
        id="bottom"
        d="M15.2,548.8l24.5,30.8c3.7,4.6,8.2,8.6,13.2,11.8c13.5,8.6,29.8,10.7,45.1,7.1
	c1.2-0.3,2.4-0.6,3.6-1c0.3-0.1,0.7-0.2,1-0.3c1-0.3,2-0.6,3-1c0.2-0.1,0.4-0.1,0.6-0.2c1.2-0.4,2.3-0.9,3.5-1.4
	c0.3-0.1,0.6-0.3,0.8-0.4c0.9-0.4,1.8-0.9,2.8-1.3c0.2-0.1,0.4-0.2,0.6-0.3c0.1,0,0.2-0.1,0.3-0.2c1.2-0.6,2.4-1.3,3.5-2
	c0.2-0.1,0.5-0.3,0.7-0.4c1-0.6,2-1.3,3-2c0.1-0.1,0.3-0.2,0.4-0.3c0.1,0,0.1-0.1,0.2-0.2c0.9-0.7,1.9-1.4,2.8-2.1
	c0.1-0.1,0.3-0.2,0.4-0.3c0.8-0.6,1.5-1.3,2.3-2c0.1-0.1,0.2-0.2,0.3-0.3c0.2-0.2,0.4-0.4,0.6-0.6c0.5-0.5,1-0.9,1.5-1.4
	c0.3-0.3,0.6-0.6,1-1c0.5-0.5,0.9-1,1.4-1.5c0.2-0.2,0.4-0.4,0.5-0.6c0.1-0.2,0.3-0.3,0.4-0.5c0.4-0.5,0.8-1,1.2-1.4
	c0.3-0.4,0.6-0.7,0.9-1.1c0.4-0.5,0.8-1,1.2-1.5c0.2-0.3,0.4-0.5,0.6-0.8c0.2-0.2,0.3-0.4,0.5-0.7l96.9-138.2"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="right"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="1101.812,1101.812"
        d="M423.6,8.9l24.5,30.8c0.2,0.3,0.4,0.6,0.7,0.9c0.2,0.2,0.3,0.5,0.4,0.7c0.1,0.2,0.2,0.3,0.3,0.5
	c0.3,0.6,0.7,1.1,1,1.7c0,0,0,0,0,0.1c0,0.1,0.1,0.1,0.1,0.2c0.3,0.6,0.5,1.1,0.7,1.7c0.1,0.2,0.1,0.4,0.2,0.6
	c0.2,0.6,0.4,1.1,0.5,1.7c0,0.1,0.1,0.2,0.1,0.3c0.1,0.6,0.2,1.2,0.3,1.8c0,0.1,0,0.2,0,0.3c0,0.2,0,0.4,0.1,0.6
	c0,0.3,0.1,0.6,0.1,0.9c0,0.3,0,0.7,0,1v0c0,0.1,0,0.3,0,0.4c0,0.7-0.1,1.5-0.1,2.3c0,0.2,0,0.3-0.1,0.5c-0.1,0.8-0.2,1.6-0.4,2.4
	l-97.6,430.6c-0.1,0.2-0.1,0.5-0.2,0.7c-0.1,0.2-0.1,0.4-0.2,0.6c-0.1,0.3-0.2,0.6-0.3,0.9c-0.1,0.3-0.2,0.6-0.3,0.9
	c-0.1,0.3-0.2,0.6-0.3,0.8c0,0.1-0.1,0.2-0.1,0.3s-0.1,0.2-0.1,0.3c-0.3,0.8-0.7,1.5-1.1,2.2c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0.1
	c-0.4,0.7-0.8,1.4-1.3,2c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.1,0.2-0.2,0.3c-0.4,0.5-0.8,1.1-1.2,1.6c-0.1,0.1-0.1,0.2-0.2,0.2
	c0,0-0.1,0.1-0.1,0.1c-0.5,0.6-1.1,1.2-1.7,1.7c-0.1,0.1-0.1,0.1-0.2,0.2s-0.2,0.1-0.2,0.2c-0.7,0.6-1.4,1.2-2.1,1.7c0,0,0,0,0,0
	c0,0-0.1,0-0.1,0c-1,0.7-2,1.3-3,1.9c0,0,0,0-0.1,0c-0.1,0-0.1,0.1-0.2,0.1c-0.9,0.5-1.9,0.9-2.8,1.3c-0.1,0-0.1,0-0.2,0.1
	c-1,0.4-2,0.7-3.1,0.9c-7.1,1.8-14.6,0-20.2-4.8l0,0l-80.4-69.8l-24.5-30.8"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="top"
        fill="none"
        stroke="#B1D2F3"
        strokeDasharray="1792.106,1792.106"
        d="M400.6,1.2c-3,0.7-5.9,2-8.5,3.7L12.1,256c-15.9,10.5-15.3,33.2,1.1,40.5l98.5,43.9L14.8,478.7
	c-19.5,27.9-13.4,64.8,13.5,82c13.5,8.6,29.8,10.7,45.1,7.1c16-3.7,30.1-13.2,39.5-26.7l96.8-138.2l80.4,69.8
	c5.6,4.8,13.1,6.5,20.2,4.8c9.7-2.2,17.2-9.7,19.5-19.4l97.6-430.6C431.4,10.3,416.2-2.4,400.6,1.2"
      />
    </svg>
  );
};

export default CapabilitiesPointer;