text: import React, { useContext } from "react";
  import "../styles/pathLabel.css";
  import { GlobalStateContext, GlobalDispatchContext } from "../contexts/globalContext";
  import { Link } from "gatsby";
  
  const PathLabel = () => {
      const context = useContext(GlobalStateContext);
      const dispatch = useContext(GlobalDispatchContext)
  
      const { routeHistory } = context;
      const lastRoute = routeHistory.length - 1;
  
      const handleClick = (path) => {
          dispatch({ type: "LINK_TO", payload: { path, currentRouteName: '' } });
      };
  
      return (
          <div className='services-path-label'>
              <label>Você está em: </label>
              {
                  routeHistory.map(({ index, routeName, path }) => {
                      return (
                          <label key={index} >
                              {
                                  index !== lastRoute &&
                                  <label>
                                      <Link to={path} onClick={() => handleClick(path)}>
                                          <label className='back-route-name'>{routeName}</label>
                                      </Link>
                                      <label> > </label>
                                  </label>
                              }
                              {
                                  index === lastRoute &&
                                  <label>{routeName}</label>
                              }
                          </label>
                      );
                  })
              }
          </div>
      )
  }
  
  export default PathLabel;