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

interface Props {
  variant: AnimationVariations;
}

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

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

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="600.916"
      height="594.334"
      viewBox="0 0 600.916 594.334"
    >
      <g id="cog" transform="translate(-0.384 -0.61)">
        <motion.path
          variants={variants}
          animate={variant}
          id="Fill-11_00000097480323312701775450000000079058478906695049_"
          d="M76.8,222.4l-8.5-9.7L40.1,177.2"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Path_00000071526912637505819740000006912063161078897071_"
          d="M288.2,10.1l28.2,35.5,8.3,17.2"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Path_00000003068972927150171130000013526578039737658766_"
          d="M13.3,378.9l28.2,35.4a15.6,15.6,0,0,0,12.4,5.9c23.9.8,41.9,1.4,53.8,1.8"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Shape"
          d="M199.6,376.8a115.246,115.246,0,0,1-10.2-32c0-.2-.1-.5-.1-.7a127.184,127.184,0,0,1-1.4-13.7,121.959,121.959,0,0,1,3.9-36.2,133.513,133.513,0,0,1,21.1-44.5,139.283,139.283,0,0,1,9-11.3,147.282,147.282,0,0,1,10.4-10.5,155.813,155.813,0,0,1,12.6-10.2,134.306,134.306,0,0,1,16.6-10.2,139.114,139.114,0,0,1,32.7-12.1c39.8-9.2,78.2.7,105.7,23.5"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Path_00000090284779382289024980000005336485160904327587_"
          d="M494.2,173.4c-1.3-2.1-2.8-4.2-4.3-6.7l20.9-56.2a17.237,17.237,0,0,0,.7-2.1v-.1a20.022,20.022,0,0,0,.4-2.4v-.6c0-.6.1-1.1.1-1.7v-.2c0-.3-.1-.6-.1-.9a3.083,3.083,0,0,0-.1-1v-.2c0-.2-.1-.4-.1-.6-.1-.5-.2-.9-.3-1.4a6.9,6.9,0,0,0-.3-.8c-.2-.4-.3-.8-.5-1.3-.1-.1-.1-.3-.2-.4a.758.758,0,0,1-.2-.4c-.2-.4-.5-.8-.7-1.2-.1-.2-.2-.3-.3-.5a2.651,2.651,0,0,0-.5-.6L480.5,58.7"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Fill-20_00000028303221534160555190000012697213508492494520_"
          d="M93,501.2l28.2,35.4a15.344,15.344,0,0,0,4.3,3.7l44.1,28a18.009,18.009,0,0,0,13.7,2.3,14.164,14.164,0,0,0,2.2-.7c.2-.1.5-.2.7-.3.5-.2.9-.4,1.4-.6h0a23.932,23.932,0,0,0,2.1-1.3h0a18.263,18.263,0,0,0,1.6-1.3l.2-.2,46.4-40-28.2-35.4"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Path_00000087410598269036347180000000112346104742443448_"
          d="M277.1,532.6c-13.6-1.9-22.6-3.4-39.1-6.2"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Fill-26_00000025421312156595437790000009562403719103668400_"
          d="M508.1,288.9l28.2,35.4,53.9-28a23.913,23.913,0,0,0,2.1-1.3c.1-.1.2-.2.3-.2a3.039,3.039,0,0,1,.7-.5c.3-.2.6-.5.9-.7l.6-.6.6-.6.4-.4,1.2-1.5.1-.1h0c.4-.6.8-1.2,1.2-1.9.1-.1.1-.2.2-.4.1-.3.3-.5.4-.8a9.291,9.291,0,0,0,.5-1c.1-.2.1-.4.2-.6a5.639,5.639,0,0,0,.4-1.2c.1-.3.2-.5.3-.8a2.2,2.2,0,0,0,.1-.8c.1-.4.1-.7.2-1.1.1-.5.1-1.1.2-1.6v-1.4a13.547,13.547,0,0,0-.2-2v-.1L592,224.4a15.98,15.98,0,0,0-.5-2.1,1.446,1.446,0,0,1-.2-.7c-.2-.5-.3-.9-.5-1.3a.349.349,0,0,0-.1-.2.758.758,0,0,1-.2-.4c-.3-.5-.5-1-.8-1.4-.1-.1-.1-.2-.2-.4-.2-.2-.3-.5-.5-.7l-28.2-35.4"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Path_00000016043507590792644680000015098493999943615625_"
          d="M536.3,324.3c-4.3,20.4-6.5,29.4-11.3,48.5"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Fill-31_00000135653171371340059090000013086387212257098426_"
          d="M453.6,476.6c-19,12.1-26.7,17.5-45,30.1"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Fill-34_00000118394466656013970730000011252503692154930600_"
          d="M287.2,552.5l28.2,35.4a17.591,17.591,0,0,0,17.6,6l54-12.5a13.086,13.086,0,0,0,2.8-.9c.3-.1.6-.3.9-.4.4-.2.9-.4,1.3-.6a1.38,1.38,0,0,0,.4-.3,10.543,10.543,0,0,0,1.1-.7c.3-.2.6-.3.9-.5a2.18,2.18,0,0,0,.5-.4c.2-.2.5-.4.7-.6s.4-.3.6-.5a5.242,5.242,0,0,0,1-1.1l.3-.3.1-.1a15.761,15.761,0,0,0,1.2-1.5c.1-.1.2-.3.3-.4a2.186,2.186,0,0,1,.3-.5c.2-.2.3-.5.5-.7a10.9,10.9,0,0,1,.6-1.1c.1-.2.2-.3.3-.5,0-.1.1-.1.1-.2a20.942,20.942,0,0,0,.8-2.3h0v-.1a25,25,0,0,0,.5-2.9l6.4-58.2-28.2-35.4"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="Fill-36_00000024712672782925865050000011794704480892383891_"
          d="M425.4,441.1l28.2,35.4,55.7,16.4a18.736,18.736,0,0,0,9.4.3l2.1-.6a1.421,1.421,0,0,1,.6-.2,10.092,10.092,0,0,0,1.5-.7c.1-.1.2-.1.4-.2.1,0,.1-.1.2-.1.7-.4,1.3-.8,2-1.2a.1.1,0,0,0,.1-.1,1.38,1.38,0,0,1,.4-.3c.4-.3.7-.6,1.1-.9l.2-.2.4-.4.7-.7.2-.2c.1-.1.2-.3.3-.4.2-.2.4-.5.6-.7.1-.1.2-.2.2-.3l.6-.9,31.9-45.6a16.281,16.281,0,0,0,1.1-1.7c.1-.2.2-.3.3-.5a3.553,3.553,0,0,0,.4-.9c.1-.3.3-.5.4-.8a1.854,1.854,0,0,0,.2-.7,6.47,6.47,0,0,0,.4-1.3,1.422,1.422,0,0,0,.2-.6,2.2,2.2,0,0,0,.1-.8,5.02,5.02,0,0,0,.2-1.2,7.57,7.57,0,0,0,.1-1.5v-1.6c0-.4-.1-.9-.1-1.3a1.269,1.269,0,0,0-.1-.6v-.2a14.187,14.187,0,0,0-.5-2.2.349.349,0,0,0-.1-.2,13.357,13.357,0,0,0-.7-1.8c0-.1-.1-.1-.1-.2a4.345,4.345,0,0,0-.4-.7c-.2-.3-.4-.7-.6-1-.1-.2-.3-.4-.4-.6l-28.2-35.4"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
        <motion.path
          variants={variants}
          animate={variant}
          id="top"
          d="M305.9,401.2c68.9-15.9,115.8-82.9,104.8-149.6s-75.8-107.9-144.7-92S150.2,242.5,161.2,309.2c11,66.8,75.8,108,144.7,92Zm242-226c8.1.5,14.6,6.2,15.8,13.6l8.6,52.3c1.2,7.5-3,15.6-10.3,19.7l-53.9,28c-4.5,21.3-6.7,30.2-11.9,51.1l37.3,42.7c5.2,5.4,5.4,14.3.4,21.4L502,449.7a18.54,18.54,0,0,1-20.9,7.8l-55.8-16.4c-19,12.1-26.7,17.5-45,30.1l-6.4,58.2c-.6,7.9-6.8,14.7-15.1,16.6l-54,12.5a17.209,17.209,0,0,1-19.3-8.7l-24.5-51c-21.4-2.8-30.3-4.3-51.3-7.9l-46.4,40a17.775,17.775,0,0,1-8.2,4.4,18.009,18.009,0,0,1-13.7-2.3L97.3,505c-6.8-3.8-9.4-12.1-6.4-20l20.9-56.2c-11-17.8-15.9-25-27.3-42.1l-58.9-1.9A15.754,15.754,0,0,1,9.8,371.2L1.1,318.9c-1.2-7.5,3-15.6,10.3-19.7l53.9-28c4.5-21.3,6.7-30.2,11.9-51.1L39.9,177.4c-5.2-5.4-5.4-14.3-.4-21.4l31.9-45.6a18.54,18.54,0,0,1,20.9-7.8L148,119c19-12.1,26.7-17.5,45-30.1l6.4-58.2c.6-7.9,6.8-14.7,15.1-16.6l54-12.5a17.209,17.209,0,0,1,19.3,8.7l24.5,51.1c21.4,2.8,30.3,4.4,51.2,7.9l46.4-40a17.775,17.775,0,0,1,8.2-4.4,18.009,18.009,0,0,1,13.7,2.3l44.1,28c6.8,3.8,9.4,12.2,6.4,20l-20.9,56.2c11,17.8,15.9,25,27.3,42.1Z"
          fill="none"
          stroke="#b1d2f3"
          stroke-width="1"
        />
      </g>
    </svg>
  );
};

export default CapabilitiesSettings;