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

interface Props {
  variant: AnimationVariations;
}

const CapabilitiesWorld = (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 595.1 601"
      xmlSpace="preserve"
    >
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-33_00000147188161963206936580000000446118767024949662_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M374.5,557.5
	c-30.7-29.3-117.7-59.7-193-67.9c-74.8-8.2-110.6,8.8-80.1,37.9c30.7,29.3,115.8,59.8,191.1,68C367.3,603.7,405,586.7,374.5,557.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-35_00000097472313611194678390000012574361166909552256_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M495.5,467.5
	c-52.5-49.6-199.3-101.5-328-115.4c-129-14.2-190.9,15.1-138.2,65.4c52.5,49.6,199.6,101.1,328.2,115
	C486.5,546.7,548.2,517.8,495.5,467.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-71_00000158724505327635794900000002952308229709269910_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M568.5,330.9
	C507.6,273,336.3,211.5,186.9,195.2c-149-16.3-220.5,17.4-159.7,75.3c61,57.9,230.8,119,380.3,135.3
	C556.6,422.1,629.3,388.8,568.5,330.9z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-73_00000060737151952472389740000007257389806561782947_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M565.5,183.5
	C513.1,133.9,366.2,82,237.5,68.1c-129-14.2-190.9,15.1-138.2,65.4c52.5,49.6,199.6,101.1,328.2,115
	C556.5,262.7,618.2,233.8,565.5,183.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-75_00000142893216252232111580000017952822335516563377_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M494.5,73.5
	c-30.7-29.3-116.7-59.7-192-67.9c-74.8-8.2-110.6,8.8-80.1,37.9c30.7,29.3,114.8,59.8,190.1,68C487.3,119.7,525,102.7,494.5,73.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-79_00000029017847947699216740000003572971618278196118_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M586.2,378.5
	c38.5-155-58.8-314.9-218.7-358.2C208.2-23,47.9,67.5,9.5,222.5c-38.5,155,59.2,314.7,219,358C387.9,623.8,547.8,533.5,586.2,378.5z
	"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-77_00000103960053524520013210000012188679332901316761_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M529.3,406.5
	c38.4-155.4-35-328.3-162.7-386.7C238.7-38.6,104,40.1,65.5,195.5c-38.4,155.3,34.3,327.6,162,386
	C355.4,639.9,490.8,562,529.3,406.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-67_00000101800750502462148860000003997814199017101206_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M228.5,580.5
	c98-15.2,208.3-153.1,246.7-308c38.7-155.3-10-268.8-108.7-253.6c-98,15.2-208.6,154.7-247,309.6
	C80.9,483.8,129.8,595.7,228.5,580.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-71_00000013153873583891906580000016988722165370145193_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M228.4,581.9
	c-60.9-57.9-79.9-231.8-41.4-386.8C225.3,40.3,305.7-38.4,366.5,19.5c60.8,57.8,80,231.1,41.6,385.9
	C369.6,560.3,289.4,639.8,228.4,581.9z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-69_00000147934388608782316770000009411312139305603505_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M338.5,225.5
	c38.7-154.9,51.5-246.7,28.6-204.9c-22.6,41.8-72.5,200-110.6,354.9c-38.7,154.9-50.9,247.8-28,206
	C251.1,539.8,300.4,380.4,338.5,225.5z"
      />
      <motion.path
        variants={variants}
        animate={variant}
        id="Stroke-21_00000006696191275964069090000010007334795878049698_"
        fill="none"
        stroke="#B1D2F3"
        strokeMiterlimit="10"
        d="M366.5,19.5
	c-149-16.3-300.9,96.1-339.3,251c-38.5,154.9,51.7,295.1,201.2,311.4c149.4,16.3,301.7-96.1,340.2-251.1
	C606.9,176.1,515.6,35.8,366.5,19.5z"
      />
    </svg>
  );
};

export default CapabilitiesWorld;