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 './Book.module.css'
import ExternalLink from '../ExternalLink/ExternalLink'

function Book ({ attributes, html }) {
  return (
    <>
      <h1>{attributes.title}<br /><small>by {attributes.author}</small></h1>
      <Link href='./'>Back...</Link>

      <article>
        <NextSeo
          title={attributes.title} description={attributes.desc} openGraph={
            {
              title: attributes.title,
              description: attributes.desc,
              type: 'article',
              article: {
                publishedTime: attributes.pubdate ?? null
              }
            }
          }
        />

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

  )
}

export default Book