import delve from "dlv";

import {siteConfig} from "../../config";
import Head from "next/head";

export const SeoConfig = ({metaDescription = null, lang = null, meta = [], metaTitle = null, SharedImage = null}) => {
  const description = metaDescription || siteConfig.siteDescription;
  const title = metaTitle || siteConfig.siteTitle;
  const metaImage = SharedImage ? delve(SharedImage, `media.data.attributes.formats.small.url`, siteConfig.siteLogo) : siteConfig.siteLogo;
  const metaLang = lang || siteConfig.siteLanguage;
  const metas = [
    {
      name: `description`,
      content: metaDescription
    },
    {
      property: `og:title`,
      content: metaTitle
    },
    {
      property: `og:description`,
      content: metaDescription
    },
    {
      property: `og:image`,
      content: metaImage
    },
    {
      property: `og:type`,
      content: 'website'
    },
    {
      name: `twitter:card`,
      content: `summary_large_image`
    },
    {
      name: `twitter:creator`,
      content: siteConfig.author
    },
    {
      name: `twitter:title`,
      content: metaTitle
    },
    {
      name: `twitter:description`,
      content: metaDescription

    }
  ];
  const metaList = meta && meta.length > 0 ? meta : metas;
  const type = 'website';

  return (
    <Head>
      <title>{title}</title>
      <meta name="description"
            content={description}/>
      <meta property="og:title"
            content={title}/>
      <meta property="lang"
            content={lang}/>
      {metaList.map((meta, index) => (
        <meta key={meta + index} property={meta.name} content={meta.content}/>
      ))}
    </Head>
  );
}

export default SeoConfig;
