import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'

/**
 * Search-Engine-Optimization Component
 *
 * Handles meta fields and language tag used for indexing by search engines.
 *
 * @component
 */
function SEO({ description, lang, meta, title, siteTitle, author }) {
  const finalTitle = title ? `${title} | ${siteTitle}` : siteTitle

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={finalTitle}
      meta={[
        {
          name: `description`,
          content: description,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: description,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: description,
        },
      ].concat(meta)}
    />
  )
}

SEO.defaultProps = {
  meta: [],
  description: '',
  lang: 'en',
}

SEO.propTypes = {
  /** Description meta field */
  description: PropTypes.string,
  /** Html language tag */
  lang: PropTypes.string,
  /** Additional meta data */
  meta: PropTypes.arrayOf(PropTypes.object),
  /** Page title */
  title: PropTypes.string,
  /** Site title */
  siteTitle: PropTypes.string.isRequired,
  /** Author of the page content and/or the application */
  author: PropTypes.string.isRequired,
}

export default SEO