text: 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, image, schemaMarkup }) {
    const data = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
              description
              author
              keywords
              siteUrl
            }
          }
          image: file(relativePath: { eq: "social-preview.png" }) {
            childImageSharp {
              resize(width: 1200) {
                src
                height
                width
              }
            }
          }
        }
      `
    )
  
    const metaDescription = description || data.site.siteMetadata.description
    const metaImage = data.image.childImageSharp.resize
    const imageString = image
      ? image
      : `${data.site.siteMetadata.siteUrl}${metaImage.src}`
  
    return (
      <Helmet
        htmlAttributes={{
          lang,
        }}
        title={title}
        titleTemplate={`%s | ${data.site.siteMetadata.title}`}
        meta={[
          {
            name: `description`,
            content: metaDescription,
          },
          {
            name: 'keywords',
            content: data.site.siteMetadata.keywords.join(','),
          },
          {
            property: `og:title`,
            content: title,
          },
          {
            property: `og:description`,
            content: metaDescription,
          },
          {
            property: `og:type`,
            content: `website`,
          },
          {
            name: `twitter:creator`,
            content: data.site.siteMetadata.author,
          },
          {
            name: `twitter:title`,
            content: title,
          },
          {
            name: `twitter:description`,
            content: metaDescription,
          },
        ]
          .concat(
            metaImage
              ? [
                  {
                    property: 'og:image',
                    content: imageString,
                  },
                  {
                    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)}
      >
        {schemaMarkup && <script type="application/ld+json">{JSON.stringify(schemaMarkup)}</script>}
        </Helmet>
    )
  }
  
  SEO.defaultProps = {
    lang: `de`,
    meta: [],
    description: ``,
  }
  
  SEO.propTypes = {
    description: PropTypes.string,
    lang: PropTypes.string,
    meta: PropTypes.arrayOf(PropTypes.object),
    title: PropTypes.string.isRequired,
  }
  
  export default SEO
  