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

interface Props {
  variant: AnimationVariations;
}

const CapabilitiesHeart = (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 559"
      xmlSpace="preserve"
    >
      <motion.path
        variants={variants}
        animate={variant}
        id="left"
        d="M97.1,412.4l27.3,33.8c48.2,59.8,96.4,98.7,99.5,101.2l13.6,10.9l-27.3-33.8"
        fill="none"
        stroke="#B1D2F3"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeDasharray="406.2271,406.2271"
      />
      <motion.path
        variants={variants}
        animate={variant}
        fill="none"
        stroke="#B1D2F3"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeDasharray="1333.2207,1333.2207"
        id="right"
        d="M237.5,558.4l17.5-6c0.1,0,0.3-0.1,0.5-0.2c0,0,0.1,0,0.1,0c0.2-0.1,0.4-0.1,0.6-0.2
   c0.1,0,0.2-0.1,0.3-0.1c0.2-0.1,0.4-0.2,0.7-0.2c0.1-0.1,0.3-0.1,0.4-0.2c0.3-0.1,0.6-0.2,0.9-0.3c0.2-0.1,0.3-0.1,0.5-0.2
   c0.5-0.2,1-0.4,1.6-0.6c0.1,0,0.2-0.1,0.3-0.1c0.5-0.2,1-0.4,1.5-0.5c0.2-0.1,0.5-0.2,0.7-0.3c0.4-0.2,0.9-0.3,1.3-0.5
   c0.3-0.1,0.6-0.2,0.8-0.3c0.5-0.2,1-0.4,1.5-0.6c0.3-0.1,0.6-0.2,0.9-0.3c0.6-0.2,1.2-0.5,1.9-0.7c0.2-0.1,0.5-0.2,0.7-0.3
   c0.9-0.3,1.8-0.7,2.7-1.1c0.3-0.1,0.5-0.2,0.8-0.3c0.7-0.3,1.4-0.6,2.2-0.9c0.4-0.1,0.7-0.3,1.1-0.4c0.7-0.3,1.4-0.6,2.1-0.8
   c0.4-0.2,0.8-0.3,1.2-0.5c0.7-0.3,1.5-0.6,2.3-0.9c0.4-0.2,0.8-0.3,1.1-0.5c0.9-0.4,1.9-0.8,2.9-1.2c0.3-0.1,0.5-0.2,0.8-0.3
   c1.2-0.5,2.5-1,3.8-1.6c0.3-0.1,0.7-0.3,1.1-0.4c0.9-0.4,1.9-0.8,2.9-1.2c0.5-0.2,1-0.4,1.5-0.6c0.9-0.4,1.8-0.8,2.7-1.1
   c0.5-0.2,1.1-0.5,1.6-0.7c0.9-0.4,1.9-0.8,2.9-1.2c0.5-0.2,1-0.4,1.5-0.6c1.4-0.6,2.8-1.2,4.2-1.8c0.1,0,0.2-0.1,0.3-0.1
   c1.5-0.7,3.1-1.4,4.6-2.1c0.5-0.2,0.9-0.4,1.4-0.6c1.1-0.5,2.2-1,3.4-1.5c0.6-0.3,1.1-0.5,1.7-0.8c1.1-0.5,2.2-1,3.3-1.5
   c0.6-0.3,1.2-0.5,1.8-0.8c1.2-0.5,2.3-1.1,3.5-1.6c0.5-0.3,1.1-0.5,1.6-0.7c1.7-0.8,3.4-1.6,5.1-2.5c0.1-0.1,0.3-0.1,0.4-0.2
   c1.6-0.8,3.2-1.6,4.8-2.3c0.6-0.3,1.1-0.6,1.7-0.8c1.2-0.6,2.4-1.2,3.7-1.8c0.7-0.3,1.3-0.7,2-1c1.2-0.6,2.4-1.2,3.6-1.8
   c0.7-0.3,1.3-0.7,2-1c1.3-0.7,2.7-1.4,4.1-2.1c0.5-0.3,1-0.5,1.5-0.8c1.9-1,3.7-1.9,5.6-2.9c0.3-0.2,0.7-0.4,1.1-0.6
   c1.5-0.8,3.1-1.6,4.7-2.5c0.6-0.3,1.3-0.7,1.9-1c1.3-0.7,2.6-1.4,3.9-2.1c0.7-0.4,1.4-0.8,2.1-1.2c1.3-0.7,2.6-1.4,3.9-2.2
   c0.5-0.3,0.9-0.5,1.4-0.7c0.1-0.1,0.3-0.2,0.4-0.3c3.1-1.7,6.3-3.5,9.4-5.3c0.4-0.2,0.8-0.5,1.2-0.7c3.2-1.8,6.4-3.7,9.5-5.6
   c0.4-0.2,0.8-0.5,1.2-0.7c3.2-1.9,6.4-3.9,9.6-5.9c0.4-0.2,0.8-0.5,1.2-0.7c3.2-2,6.5-4,9.7-6.1c0.4-0.3,0.8-0.5,1.2-0.8
   c3.2-2.1,6.5-4.2,9.7-6.4c0.4-0.3,0.8-0.5,1.2-0.8c3.2-2.2,6.5-4.4,9.7-6.6c0.4-0.3,0.8-0.5,1.2-0.8c3.2-2.3,6.4-4.5,9.6-6.9
   c0.4-0.3,0.8-0.6,1.2-0.9c3.2-2.3,6.4-4.7,9.6-7.1c0.2-0.2,0.5-0.4,0.7-0.5c0.1-0.1,0.3-0.2,0.4-0.3c3.9-3,7.8-6,11.7-9.1
   c0,0,0.1,0,0.1-0.1c3.9-3.1,7.7-6.3,11.5-9.5c0.3-0.3,0.6-0.5,0.9-0.8c3.5-3,7.1-6.1,10.5-9.2c0.4-0.3,0.7-0.7,1.1-1
   c3.5-3.2,7-6.4,10.4-9.7c0.1-0.1,0.3-0.3,0.4-0.4c0.3-0.3,0.5-0.5,0.8-0.8c2-2,4-4,6-5.9c0.6-0.6,1.2-1.2,1.8-1.9
   c1.3-1.4,2.7-2.8,4-4.2c0.7-0.7,1.3-1.4,2-2.1c1.3-1.4,2.5-2.7,3.7-4.1c0.6-0.7,1.2-1.4,1.8-2c1.5-1.7,3-3.5,4.4-5.2
   c0.2-0.3,0.5-0.5,0.7-0.8c0,0,0.1-0.1,0.1-0.1c1.6-1.9,3.2-3.9,4.7-5.9c0.4-0.5,0.8-1.1,1.2-1.6c1.1-1.4,2.2-2.9,3.3-4.3
   c0.6-0.7,1.1-1.5,1.6-2.2c0.9-1.2,1.8-2.5,2.7-3.7c0.6-0.8,1.1-1.6,1.7-2.4c0.8-1.2,1.7-2.4,2.5-3.6c0.3-0.4,0.6-0.8,0.8-1.2
   c0.3-0.4,0.6-0.9,0.8-1.3c0.7-1.1,1.4-2.2,2.1-3.3c0.5-0.9,1.1-1.7,1.6-2.6c0.7-1.1,1.4-2.2,2-3.4c0.5-0.8,1-1.7,1.5-2.5
   c0.7-1.2,1.3-2.3,2-3.5c0.5-0.8,0.9-1.6,1.4-2.5c0.7-1.2,1.3-2.4,2-3.7c0.3-0.6,0.7-1.2,1-1.9c0.1-0.1,0.1-0.3,0.2-0.4
   c0.8-1.6,1.6-3.3,2.4-4.9c0.2-0.4,0.4-0.8,0.6-1.1c1-2,1.9-4,2.8-6.1c0.3-0.6,0.5-1.2,0.7-1.7c0.6-1.5,1.2-2.9,1.8-4.4
   c0.3-0.8,0.6-1.5,0.9-2.3c0.5-1.3,1-2.5,1.5-3.8c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.4,0.3-0.9,0.5-1.3c0.6-1.6,1.1-3.2,1.7-4.8
   c0.2-0.7,0.5-1.5,0.7-2.2c0.6-1.8,1.1-3.7,1.7-5.5c0.1-0.4,0.3-0.9,0.4-1.3c0.6-2.3,1.2-4.5,1.8-6.8c0.1-0.6,0.3-1.2,0.4-1.8
   c0.4-1.7,0.8-3.4,1.1-5.1c0.1-0.4,0.2-0.7,0.2-1.1c0.1-0.5,0.2-0.9,0.2-1.4c0.2-1.1,0.4-2.2,0.6-3.3c0.2-0.9,0.3-1.8,0.4-2.7
   c0.2-1.1,0.3-2.2,0.5-3.3c0.1-0.9,0.2-1.8,0.3-2.7c0.1-1.1,0.2-2.2,0.4-3.3c0.1-0.9,0.2-1.8,0.3-2.7c0.1-1.1,0.2-2.2,0.2-3.4
   c0.1-0.9,0.1-1.7,0.2-2.6c0.1-1.1,0.1-2.3,0.1-3.4c0-0.8,0.1-1.7,0.1-2.5c0-1.2,0-2.4,0-3.6c0-0.8,0-1.6,0-2.3c0-1.3-0.1-2.7-0.1-4
   c0-0.7,0-1.3-0.1-1.9c-0.1-2-0.3-3.9-0.4-5.9c-0.2-2.2-0.5-4.4-0.8-6.6c-0.1-0.7-0.2-1.4-0.3-2.1c-0.2-1.5-0.5-3-0.7-4.5
   c-0.1-0.8-0.3-1.6-0.4-2.3c-0.3-1.5-0.6-2.9-0.9-4.3c-0.2-0.7-0.3-1.5-0.5-2.2c-0.4-1.7-0.8-3.4-1.3-5.1c-0.1-0.4-0.2-0.8-0.3-1.3
   c-0.6-2.1-1.2-4.2-1.9-6.2c-0.2-0.6-0.4-1.1-0.6-1.7c-0.5-1.5-1-3-1.6-4.5c-0.3-0.7-0.5-1.4-0.8-2.1c-0.5-1.3-1.1-2.7-1.6-4
   c-0.3-0.7-0.6-1.4-0.9-2.1c-0.6-1.4-1.3-2.8-2-4.2c-0.2-0.4-0.4-0.9-0.6-1.3c-0.1-0.1-0.1-0.3-0.2-0.4c-0.9-1.9-1.9-3.7-2.9-5.6
   c0-0.1-0.1-0.1-0.1-0.2c-1-1.8-2-3.5-3-5.2c-0.4-0.6-0.7-1.2-1.1-1.8c-0.7-1.2-1.5-2.4-2.2-3.6c-0.4-0.7-0.9-1.3-1.3-2
   c-0.7-1.1-1.5-2.2-2.2-3.3c-0.2-0.3-0.5-0.7-0.7-1c-0.2-0.3-0.4-0.5-0.6-0.8c-1.5-2.1-3-4.1-4.6-6.1l-27.3-33.8"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="top"
        d="M441.8,39.9c18.5,2.9,36,9.6,52,19.7c45.1,28.6,72.5,72,77.1,122.4c5.6,60.8-22.8,124.9-79.8,180.5
   C387.4,463.3,234.3,516.4,227.8,518.6l-17.5,6l-13.6-10.9c-5-4-123.8-99.9-175.6-225.7C-7.5,219-5.5,150.7,26.7,95.8
   C53.3,50.4,98,18.3,152.6,5.6c19.5-4.5,38.7-5.4,57.1-2.5c51.3,8.1,85.5,43.1,104.3,69.1C343.2,53.8,390.6,31.8,441.8,39.9"
        fill="none"
        stroke="#B1D2F3"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeDasharray="1722.3413,1722.3413"
      />
    </svg>
  );
};

export default CapabilitiesHeart;