import React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const SEO = () => {
    const data = useStaticQuery(graphql`
        query {
            directus {
                site {
                    id
                    theme
                    title
                    description
                    author
                }
            }
        }
    `)

    const dt = data.directus.site
    const theme = dt?.theme || "onegeo"

    return (
        <Helmet
            htmlAttributes={{
                lang: `fr`,
                "data-theme": theme,
            }}
            title={dt?.title}
            meta={[
                {
                    name: `description`,
                    content: dt?.description,
                },
                {
                    property: `og:title`,
                    content: dt?.title,
                },
                {
                    property: `og:description`,
                    content: dt?.description,
                },
                {
                    property: `og:type`,
                    content: `website`,
                },
                {
                    name: `twitter:card`,
                    content: `summary`,
                },
                {
                    name: `twitter:creator`,
                    content: dt?.author,
                },
                {
                    name: `twitter:title`,
                    content: dt?.title,
                },
                {
                    name: `twitter:description`,
                    content: dt?.description,
                },
            ]}
        />
    )
}

export default SEO