text: import React from "react";
  import PropTypes from "prop-types";
  import Helmet from "react-helmet";
  import { useStaticQuery, graphql } from "gatsby";
  import favicon from "../images/favicon.ico";
  
  const SEO = ({ description, lang, meta, title, route }) => {
    const { site } = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
              description
              author
            }
          }
        }
      `
    );
  
    const metaDescription = description || site.siteMetadata.description;
  
    return (
      <Helmet
        htmlAttributes={{
          lang,
        }}
        title={title}
        titleTemplate={`%s | ${site.siteMetadata.title}`}
        meta={[
          {
            name: `theme-color`,
            content: `#2f8dff`,
          },
          {
            name: `description`,
            content: metaDescription,
          },
          {
            property: `og:title`,
            content: title,
          },
          {
            property: `og:site_name`,
            content: site.siteMetadata.title,
          },
          {
            property: `og:description`,
            content: metaDescription,
          },
          {
            property: `og:type`,
            content: `website`,
          },
        ].concat(meta)}
        link={[
          {
            rel: "icon",
            type: "image/png",
            href: favicon,
          },
        ]}
      />
    );
  };
  
  SEO.defaultProps = {
    lang: `en`,
    meta: [],
    description: ``,
  };
  
  SEO.propTypes = {
    description: PropTypes.string,
    lang: PropTypes.string,
    meta: PropTypes.arrayOf(PropTypes.object),
    title: PropTypes.string.isRequired,
    route: PropTypes.string.isRequired,
  };
  
  export default SEO;
  