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 ({ title, excerpt, date_published, tags, html }) {
  useEffect(() => {
    hljs.highlightAll()
  }, [html])
  return (
    <>
      <h1>{title}</h1>
      <article>
        <NextSeo
          title={title} description={excerpt} openGraph={
            {
              title,
              description: excerpt,
              type: 'article',
              article: {
                publishedTime: date_published ?? null
              }
            }
      }
        />
        <div>
          <Link href='./'>Back...</Link>
          {date_published && <p>{formatDate(date_published)}</p>}
          <div data-test='content' dangerouslySetInnerHTML={{ __html: html }} />
          {tags && <p>Tags: {tags.join(', ')}</p>}
        </div>
      </article>
    </>

  )
}

export default Article