import React from 'react'
import { Data } from '../../models/game'
import { Interweave } from 'interweave'
import { Divider, Box, Heading } from '@chakra-ui/react'
import { ImmutableObject } from '@hookstate/core'

interface Props {
  game: ImmutableObject<Data>
}

export default function Summary({ game }: Props) {
  const { summary, reviews } = game
  return (
    <Box>
      {reviews.length >= 1 && (
        <>
          <Heading as="h1">Reviews</Heading>
          <Divider m="3" />
          <Interweave
            content={reviews}
            allowAttributes
            allowElements
          />
        </>
      )}
      <Heading mt={reviews.length >= 1 ? '10' : ''} as="h1">About This Game</Heading>
      <Divider m="3" />
      <Interweave
        content={summary}
        allowAttributes
        allowElements
      />
    </Box>
  )
}
