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

export default Article;