import React, { Component } from "react";
import { Row, Col } from "react-bootstrap";
import EfeBasicModal from "./BasicModal";
import EfeScrollableModal from "./ScrollableModal";

export default class ModalUI extends Component {
  render() {
    return (
      <div>
        <Row className="m-2 mb-4">
          <Col sm="4">
            <h6>Basic modal</h6>
            <hr />
            <EfeBasicModal></EfeBasicModal>
          </Col>
          <Col sm="4">
            <h6>Centered modal</h6>
            <hr />
            <EfeBasicModal
              centered="true"
              name="Centered modal"
            ></EfeBasicModal>
          </Col>
          <Col sm="4">
            <h6>Small modal</h6>
            <hr />
            <EfeBasicModal size="sm" name="Small Modal"></EfeBasicModal>
          </Col>
        </Row>
        <Row className="m-2 mb-4">
          <Col sm="4">
            <h6>Large modal</h6>
            <hr />
            <EfeBasicModal size="lg" name="Large Modal"></EfeBasicModal>
          </Col>
          <Col sm="4">
            <h6>Extra Large modal</h6>
            <hr />
            <EfeBasicModal size="xl" name="Extra Large Modal"></EfeBasicModal>
          </Col>
          <Col sm="4">
            <h6>Scrollable Modal</h6>
            <hr />
            <EfeScrollableModal></EfeScrollableModal>
          </Col>
        </Row>
      </div>
    );
  }
}
