import { formatDate } from '@/lib/helpers'
import { NextSeo } from 'next-seo'
import Link from 'next/link'
import React, { useEffect } from 'react'

import 'highlight.js/styles/atom-one-dark.css'
import hljs from 'highlight.js'

function Article ({ attributes, html }) {
  useEffect(() => {
    hljs.highlightAll()
  }, [attributes, html])
  return (
    <>
      <h1>{attributes.title}</h1>
      <article>
        <NextSeo
          title={attributes.title} description={attributes.desc} openGraph={
            {
              title: attributes.title,
              description: attributes.desc,
              type: 'article',
              article: {
                publishedTime: attributes.pubdate ?? null
              }
            }
          }
        />
        <div>
          <Link href='./'>Back...</Link>
          {attributes.pubdate && <p>{formatDate(attributes.pubdate)}</p>}
          <div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
          {attributes.tags && <p>Tags: {attributes.tags.join(', ')}</p>}
        </div>
      </article>
    </>

  )
}

export default Article