import { Box, chakra } from "@chakra-ui/react";
import React from "react";
import { useToken } from "@chakra-ui/react";
import { motion } from "framer-motion";
const Logo = () => {
  return (
    <Box maxW="200px">
      <motion.svg
        style={{ width: "100%" }}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 798.92 453.49"
      >
        <defs>
          <style>
            {`   .b,
      .c {
        fill: none;
        stroke: var(--chakra-colors-accent);
        stroke-miterlimit: 10;
        stroke-width: 40px;
      }

      .d {
        fill: #333;
      }

      .e {
        fill: var(--chakra-colors-highlight);
      }

      .played {
        fill: var(--chakra-colors-main);
          transition: fill 0.2s linear;
        
      }

      .c {
        stroke-linecap: round;
      }`}
          </style>
        </defs>

        <motion.g
          style={{ zIndex: 0 }}
          transition={{ type: "tween", ease: "circOut", duration: 0.5 }}
          animate={{ scale: 1 }}
          initial={{ scale: 0 }}
        >
          <motion.path
            transition={{ delay: 1, opacity: { duration: 0.1 } }}
            animate={{ pathLength: 1, opacity: 1 }}
            initial={{ pathLength: 0, opacity: 0 }}
            d="M759.76 308.57L714.51 378.92 637.05 333.59"
            className="c"
          ></motion.path>
          <motion.path
            transition={{ delay: 0.1, opacity: { duration: 0.1 } }}
            animate={{ pathLength: 1, opacity: 1 }}
            initial={{ pathLength: 0, opacity: 0 }}
            d="M108.52 155.94L38.17 110.7 83.5 33.23"
            className="c"
          ></motion.path>
          <motion.path
            transition={{ type: "tween", duration: 1, ease: "circOut" }}
            animate={{ pathLength: 1 }}
            initial={{ pathLength: 0 }}
            style={{ pathOffset: 34 }}
            d="M56.19 101.61c266.27-71.11 171.63 434.9 399.46-31.49 61.99-126.9-79.84 503.13 12.99 302.97C531.18 238.26 682 186.15 706.22 356.36"
            className="b"
          ></motion.path>
        </motion.g>
        <motion.path
          animate={{ scale: 1 }}
          initial={{ scale: 0 }}
          transition={{ type: "spring" }}
          d="M315.73 169.2l.75 20.36c1.08 29.53-7.23 56.08-25.21 80.02-17.7 23.57-41.19 39.88-70.75 48.73-31.28 9.37-57.48 7.07-78.59-6.89-20.83-14.05-31.77-35.7-32.86-65.23s8.06-57.2 27.4-83.57c19.34-26.37 43.94-43.89 73.5-52.74 18.65-5.59 36.03-6.45 51.83-2.77 16.09 3.59 28.55 11.16 37.97 22.54l-42.71 38.01c-8.5-10.21-25.16-13.62-44.68-7.78-15.78 4.73-28.8 13.84-38.46 27.17-9.67 13.33-14.35 28.07-13.76 44.12s5.93 27.21 16.36 34.81c10.43 7.6 24.98 8.75 43.06 3.33 23.25-6.96 38.42-20.49 45.24-40.22l-48.79 14.61-1.62-44.15 101.31-30.35zM391.34 304.36l78.16 35.59v48.46l-129.79-59.1v-201.9l128.35 58.44v48.17l-76.72-34.93v27.98l69.51 31.65v47.59l-69.51-31.65v29.71zM606.36 52.68l51.34-24.49v201.9l-39.8 18.99-71.24-67.54v101.53l-51.63 24.63V105.79l40.09-19.13 71.24 67.54V52.68z"
          className="e"
        ></motion.path>
        <motion.path
          animate={{ scale: 1 }}
          initial={{ scale: 2 }}
          transition={{ type: "tween", duration: 0.3 }}
          d="M256.3 210.31l1.47 5.29.18-.05c3.57-6.6 7.64-8.91 13.21-10.46 12.95-3.6 25.16.37 28.95 13.96 3.48 12.5-3.97 23.51-16.56 27.02-7.39 2.06-13.52 1.21-17.04-1.55l-.18.05 5.51 19.79-13.13 3.66-15.08-54.18 12.68-3.53zm20.89 27.4c6.66-1.85 11.34-7.28 9.28-14.67-2.06-7.39-8.87-9.62-15.53-7.77-6.57 1.83-11.25 7.26-9.19 14.65 2.06 7.39 8.87 9.62 15.44 7.79zM329.61 193.54l-11.34 53.25-13.33-2.84 11.34-53.25 13.33 2.84zM353.23 248.28c-10.77 1.62-18.81-.91-20.2-10.18-1.45-9.64 7.04-13.03 15.2-14.83l14.18-3.09c4.08-.9 5.37-1.86 4.89-5.04s-3.42-4.27-11.28-3.09c-5.71.86-8.65 1.68-9.79 7.5l-13.01 1.96c-.25-12.5 11.24-15.67 22.29-17.33 19.29-2.9 24.32 2.57 25.43 9.96l4.18 27.81-12.83 1.93-.63-4.21c-4.02 5.1-12.34 7.7-18.43 8.61zm8.26-20.87l-7.77 1.84c-4.72 1.09-6.86 2.76-6.33 6.31s4.29 5 9.35 4.24c6.83-1.03 13.94-5.35 12.94-12l-.49-3.28c-2.34 1.6-5.11 2.3-7.71 2.88zM410.7 262.01c-4.03 6.47-7.99 7.61-15.5 6.7-3.2-.39-6.37-.97-9.54-1.54l1.14-9.4c1.95.43 3.91.76 5.89 1 3.29.4 4.95-.73 6.89-3.36l1.67-2.75-14.58-41.64 14.66 1.79 8.57 28.32 14.65-25.5 14.47 1.76-28.33 44.62zM470.33 259.52c-16.19 3.07-28.18-1.2-31-16.09-2.84-14.98 6.75-23.35 22.93-26.42 17.67-3.36 27.87 3.67 30.7 18.55l.23 1.21-39.35 7.47.02.09c.72 3.81 5.82 8.82 14.93 7.09 5.4-1.02 8.87-3.52 10.17-7.33l14.33-2.72c-2.12 10.14-10.68 15.81-22.96 18.14zm7.52-27.93c-.41-2.14-4.56-8.29-14.33-6.44-10.6 2.01-11.35 10.25-11.16 11.27l.02.09 25.49-4.84-.02-.09zM512.39 236.55c-12.59-3.13-20.78-12.58-17.4-26.18 3.15-12.68 15.04-18.51 27.72-15.36 7.44 1.85 12.39 5.52 14.09 9.65l.09.02 4.61-18.56 13.32 3.31-13.13 52.84-12.86-3.2 1.21-4.87-.09-.02c-5.55 3.89-11.5 3.87-17.56 2.37zm6.03-8.55c6.62 1.64 13.36-.78 15.21-8.22 1.85-7.44-2.98-12.74-9.6-14.38-6.71-1.67-13.46.75-15.3 8.2-1.85 7.44 2.98 12.74 9.69 14.41z"
          className="played"
        ></motion.path>
      </motion.svg>
    </Box>
  );
};

export default Logo;