import { ModalBody, ModalHeader } from "@contentstack/venus-components"

export default function FullSizeImage({
  title,
  onClose,
  imageUrl,
  alt,
  aspectRatio,
}: {
  title: string
  onClose: () => void
  imageUrl: string
  alt: string
  aspectRatio: number
}) {
  return (
    <>
      <ModalHeader title={title} closeModal={onClose} />
      <ModalBody
        id="fullsize-image"
        style={{
          maxHeight: "inherit",
          borderRadius: "50px",
          display: "flex",
          justifyContent: "center",
        }}
      >
        <img
          src={imageUrl}
          style={{
            aspectRatio,
            maxWidth: "100%",
            maxHeight: "100%",
            objectFit: "contain",
          }}
          alt={alt}
        />
      </ModalBody>
    </>
  )
}