text: /**
   * SEO component that queries for data with
   *  Gatsby's useStaticQuery React hook
   *
   * See: https://www.gatsbyjs.com/docs/use-static-query/
   */
  
  import React from "react"
  import PropTypes from "prop-types"
  import { Helmet } from "react-helmet"
  import { useStaticQuery, graphql } from "gatsby"
  
  function SEO({ description, lang, meta, title }) {
    const {
      site,
      metaImage: {
        childImageSharp: { fixed: metaImage },
      },
    } = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
              description
              author
              keywords
              siteUrl
            }
          }
          metaImage: file(relativePath: { eq: "main-logo.png" }) {
            childImageSharp {
              fixed(width: 64, height: 82) {
                src
                width
                height
              }
            }
          }
        }
      `
    )
  
    const metaDescription = description || site.siteMetadata.description
    const defaultTitle = site.siteMetadata?.title
    const metaKeywords = site.siteMetadata?.keywords?.join(",")
    const image =
      metaImage && metaImage.src
        ? `${site.siteMetadata.siteUrl}${metaImage.src}`
        : null
  
    return (
      <Helmet
        htmlAttributes={{
          lang,
        }}
        title={title}
        titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
        meta={[
          {
            name: `description`,
            content: metaDescription,
          },
          {
            name: "keywords",
            content: metaKeywords,
          },
          {
            property: `og:title`,
            content: title,
          },
          {
            property: `og:description`,
            content: metaDescription,
          },
          {
            property: `og:type`,
            content: `website`,
          },
          {
            name: `twitter:creator`,
            content: site.siteMetadata?.author || ``,
          },
          {
            name: `twitter:title`,
            content: title,
          },
          {
            name: `twitter:description`,
            content: metaDescription,
          },
        ]
          .concat(
            metaImage
              ? [
                  {
                    property: `og:image`,
                    content: image,
                  },
                  {
                    property: `og:image:width`,
                    content: metaImage.width,
                  },
                  {
                    property: `og:image:height`,
                    content: metaImage.height,
                  },
                  {
                    name: `twitter:card`,
                    content: `summary_large_image`,
                  },
                ]
              : [
                  {
                    name: `twitter:card`,
                    content: `summary`,
                  },
                ]
          )
          .concat(meta)}
      />
    )
  }
  
  SEO.defaultProps = {
    lang: `en`,
    meta: [],
    description: ``,
    keywords: ``,
  }
  
  SEO.propTypes = {
    description: PropTypes.string,
    lang: PropTypes.string,
    meta: PropTypes.arrayOf(PropTypes.object),
    title: PropTypes.string.isRequired,
  }
  
  export default SEO
  