import React from 'react'
import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react'
import Summary from './Summary'
import { ImmutableObject } from '@hookstate/core'
import { Data } from '../../models/game'


interface Props {
  isOpen: boolean,
  onClose: () => void,
  game: ImmutableObject<Data>
}

const SummaryModal = ({ isOpen, onClose, game }: Props) => {

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent maxW={'90%'}>
        <ModalCloseButton />
        <ModalBody>
          <Summary game={game} />
        </ModalBody>
        <ModalFooter>
          <Button colorScheme='blue' onMouseDown={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

export default SummaryModal