text: import Tooltip from "@material-ui/core/Tooltip";
  import { graphql, useStaticQuery } from "gatsby";
  import { GatsbyImage } from "gatsby-plugin-image";
  import React, { useContext } from "react";
  import Heading from "../components/Heading";
  import { MdSchool } from "../components/Icons";
  import ThemeContext from "../context/ThemeContext";
  
  const Education = () => {
    const { dark } = useContext(ThemeContext);
    const data = useStaticQuery(graphql`
      {
        allEducationJson {
          edges {
            node {
              id
              title
              subtitle
              period
              icon {
                childImageSharp {
                  gatsbyImageData(width: 32, height: 32, layout: FIXED)
                }
              }
            }
          }
        }
      }
    `);
  
    return (
      <section id="education">
        <Heading icon={MdSchool} title="Education" />
  
        <div className="flex">
          <div className="w-1 bg-gray-500 rounded-full md:ml-6 opacity-25" />
          <div className="-ml-2">
            {data.allEducationJson.edges.map(({ node }, index) => {
              return (
                <div
                  key={node.id}
                  className="py-4 flex wow fadeInDown"
                  style={{
                    animationDuration: `${index * 200 + 500}ms`,
                  }}
                >
                  <Tooltip title={`(${node.period})`} placement="left">
                    <div
                      className={`relative mt-3 w-3 h-3 rounded-full shadow-lg opacity-75 z-2 ${
                        dark ? "bg-white" : "bg-primary-500"
                      } duration-200`}
                    />
                  </Tooltip>
                  <div className="ml-8">
                    <GatsbyImage
                      className="w-8 h-8"
                      alt={node.title}
                      image={node.icon.childImageSharp.gatsbyImageData}
                    />
                    <h6 className="mt-3 font-semibold">{node.title}</h6>
                    <h6 className="text-sm">{node.subtitle}</h6>
                    <h6 className="mt-2 text-xs">({node.period})</h6>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  };
  
  export default Education;
  