import Head from 'next/head'
import React from 'react'
import { addPath } from '@components/image'

const favicon = require('@assets/images/favicon.png')
const appleTouchIcon = require('@assets/images/touch-icon.png')
const ogImage = require('@assets/images/blockstack_og.png')
const DEFAULT = {
  desc: `Blockstack is building an ecosystem that gives your users control over their fundamental digital rights: Identity, data-ownership, privacy, and security. Join us and help build the new internet.`,
  ogImage: addPath(ogImage.src)
}

const url = 'https://blockstack.org/'

const Meta = ({
  title,
  description = DEFAULT.desc,
  ogImage = DEFAULT.ogImage,
  ...rest
}) => {
  let metaOgImage = url + ogImage
  if (ogImage && ogImage.indexOf && (ogImage.indexOf('https://') >= 0)) {
    metaOgImage = ogImage
  } else if (ogImage && ogImage[0] === '/') {
    metaOgImage = url + ogImage.slice(1)
  }
  return (
    <Head>
      <meta name="description" content={description} />
      <link
        rel="shorticon icon"
        href={addPath(favicon.src)}
        type="image/x-icon"
      />
      <link rel="icon" href={addPath(favicon.src)} type="image/x-icon" />
      <link
        rel="apple-touch-icon-precomposed"
        href={addPath(appleTouchIcon.src)}
      />
      <link rel="canonical" href={url} />

      <meta property="og:image" content={metaOgImage} />
      <meta property="og:site_name" content="Blockstack.org" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
    </Head>
  )
}

export { Meta }

@@ -1542,24 +1542,311 @@
 cription%7D /%3E
+%0A%0A      %3Cmeta name=%22twitter:card%22 content=%22summary_large_image%22%3E%0A      %3Cmeta name=%22twitter:site%22 content=%22@blockstack%22%3E%0A      %3Cmeta name=%22twitter:title%22 content=%7Btitle%7D%3E%0A      %3Cmeta name=%22twitter:description%22 content=%7Bdescription%7D%3E%0A      %3Cmeta name=%22twitter:image%22 content=%7BmetaOgImage%7D%3E
 %0A    %3C/Head%3E

add twitter metatags