import React from "react";
import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from "../../";

export default (
  <div className="m-5 position-relative">
    <Modal onClose={() => console.log("onClose")} isScrollable isRelative>
      <ModalHeader onClose={() => console.log("onClose")}>
        <ModalTitle>Modal title</ModalTitle>
      </ModalHeader>
      <ModalBody>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed
          consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed
          odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
          purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
          magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
          rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent
          commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
          ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet
          fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
          porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
          dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
          magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla
          non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo
          odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
          ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
          et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia
          bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed
          consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed
          odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur
          purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
          magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
          rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent
          commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
          ullamcorper nulla non metus auctor fringilla.
        </p>
      </ModalBody>
      <ModalFooter>
        <Button onClick={() => console.log("onClose")} variant="light">
          Close
        </Button>
        <Button onClick={() => console.log("Save changes")}>Save changes</Button>
      </ModalFooter>
    </Modal>
  </div>
);
