import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'

function Seo(props) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
          }
        }
      }
    `
  )

  const defaultDesc = props.description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  return (
    <Helmet
      title={props.title + ' - ' + defaultTitle}
      meta={[
        {
          name: 'description',
          content: defaultDesc,
        },
        {
          property: 'og:title',
          content: props.title || defaultTitle,
        },
        {
          property: 'og:description',
          content: defaultDesc,
        },
        {
          property: 'og:type',
          content: 'website',
        },
        {
          property: 'theme-color',
          content: props.embedColor
        }
      ].concat(props.meta)}
    />
  )
}

Seo.defaultProps = {
  lang: 'en',
  meta: [],
  embedColor: '#9517cf'
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string,
  embedColor: PropTypes.string
}

export default Seo