import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import './Buttons.css';
import './ModalButton.css';

function ModalButton() {
    const [show, setShow] = React.useState(false);
    
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
    <>
        <Button className="btn1" onClick={handleShow} lhref="#">View</Button>

        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>Card Title</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <div className="VideoPlayer"></div>
                Some quick example text to build on the card title and make up the bulk of the card's content.
            </Modal.Body>
        </Modal>
    </>
    );
}

export default ModalButton;
