import { formatDate } from "@/lib/helpers";
import { NextSeo } from "next-seo";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import style from "./BookReview.module.css";
import ExternalLink from "../ExternalLink/ExternalLink";

function BookReview({ review, html }) {
  const { title, image, author, description, url, tags, rating, readDate } =
    review;

  const imageUrl = image
    ? `${process.env.NEXT_PUBLIC_CONTENT_API_BASE_URL}/assets/${image}`
    : undefined;

  return (
    <>
      <h1>
        {title}
        <br />
        <small>by {author}</small>
      </h1>
      <Link href="./">Back...</Link>

      <article>
        <NextSeo
          title={title}
          description={description}
          openGraph={{
            title,
            description,
            type: "article",
            article: {
              publishedTime: readDate ?? null,
            },
          }}
        />

        <div>
          <div className={style.layout}>
            {imageUrl && (
              <Image
                src={imageUrl}
                width={250}
                height={580}
                alt=""
                className={style.thumbnail}
              />
            )}
            <div>
              <div
                data-test="content"
                dangerouslySetInnerHTML={{
                  __html: html || "<p>(no review)</p>",
                }}
              />
              <p>
                {tags?.length && (
                  <>
                    <span className="bold">Genres:</span>&nbsp;{tags.join(",")}
                    <br />
                  </>
                )}
                <span className="bold">Rating:</span>&nbsp;{rating}/5
                <br />
                <span className="bold">Read on:</span>&nbsp;
                {formatDate(readDate)}
              </p>
              <p>
                <ExternalLink href={url}>View on The StoryGraph</ExternalLink>
              </p>
            </div>
          </div>
        </div>
      </article>
    </>
  );
}

export default BookReview;