text: /**
   * SEO component that queries for data with
   *  Gatsby's useStaticQuery React hook
   *
   * See: https://www.gatsbyjs.org/docs/use-static-query/
   */
  
  import React from "react"
  import PropTypes from "prop-types"
  import Helmet from "react-helmet"
  import { withTheme } from "styled-components"
  import { useStaticQuery, graphql } from "gatsby"
  import darkFavicon from "../icons/favicon-dark.png"
  import lightFavicon from "../icons/favicon-light.png"
  import social from '../../static/social.png'
  
  function SEO({ description, lang, meta, keywords, title, theme }) {
      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}`}
              link={[
                  {
                      rel: "icon",
                      type: "image/png",
                      sizes: "16x16",
                      href: theme.isDayMode ? lightFavicon : darkFavicon,
                  },
              ]}
              meta={[
                  {
                      name: `description`,
                      content: metaDescription,
                  },
                  {
                      property: `og:title`,
                      content: title,
                  },
                  {
                      property: `og:description`,
                      content: metaDescription,
                  },
                  {
                      property: `og:type`,
                      content: `website`,
                  },
                  {
                      name: `twitter:card`,
                      content: `summary`,
                  },
                  {
                      name: `twitter:creator`,
                      content: site.siteMetadata.author,
                  },
                  {
                      name: `twitter:title`,
                      content: title,
                  },
                  {
                      name: `twitter:description`,
                      content: metaDescription,
                  },
                  {
                      name: `og:image`,
                      content: social,
                  },
                  {
                      name: `twitter:image`,
                      content: social,
                  },
              ]
                  .concat(
                      keywords.length > 0
                          ? {
                                name: `keywords`,
                                content: keywords.join(`, `),
                            }
                          : []
                  )
                  .concat(meta)}
          />
      )
  }
  
  SEO.defaultProps = {
      lang: `en`,
      meta: [],
      keywords: [],
      description: ``,
  }
  
  SEO.propTypes = {
      description: PropTypes.string,
      lang: PropTypes.string,
      meta: PropTypes.arrayOf(PropTypes.object),
      keywords: PropTypes.arrayOf(PropTypes.string),
      title: PropTypes.string.isRequired,
  }
  
  export default withTheme(SEO)
  