text: import React, { useState } from "react";
  import { graphql, useStaticQuery } from "gatsby";
  import Typist from "react-typist";
  import Heading from "../components/Heading";
  import { FaSignLanguage } from "../components/Icons";
  import * as styles from "./Languages.module.css";
  
  const Languages = () => {
    const [typistIndex, setTypistIndex] = useState(0);
    const data = useStaticQuery(graphql`
      {
        allLanguagesJson {
          edges {
            node {
              id
              text
              translation
              language
            }
          }
        }
      }
    `);
  
    return (
      <section id="languages">
        <Heading icon={FaSignLanguage} title="Languages" />
  
        <div className="h-48 md:h-40 lg:h-32 wow fadeIn">
          <Typist
            key={typistIndex}
            avgTypingDelay={40}
            cursor={{ show: false }}
            onTypingDone={() => setTypistIndex(typistIndex + 1)}
          >
            {data.allLanguagesJson.edges.map(({ node }) => {
              return (
                <div key={node.id}>
                  <h2 className="text-4xl pb-2">{node.text}</h2>
                  <span className="italic">{node.translation}</span>
                  <Typist.Backspace
                    count={node.text.length + node.translation.length}
                    delay={2000}
                  />
                  <Typist.Delay ms={300} />
                </div>
              );
            })}
          </Typist>
        </div>
  
        <div className="mt-12 flex flex-wrap">
          {data.allLanguagesJson.edges.map(({ node }) => {
            return (
              <div key={node.id} className={styles.language}>
                <span>{node.language}</span>
                <span className={styles.divider}>/</span>
              </div>
            );
          })}
        </div>
      </section>
    );
  };
  
  export default Languages;
  