import * as React from 'react';
import Modal from 'vestarplus-design-system';
export default function BasicModalFunction() {

    const [isModalOpen, setModalOpen] = useState(false);

  const openModal = () => {
    setModalOpen(true);
  };

  const closeModal = () => {
    setModalOpen(false);
  };

  return (

 <div style={{ width: 'fit-content' }}>
<Buttons
  type="primary"
  size="medium"
  onClick={openModal}
>
  <span style={{ color: 'white' }}>Open Modal</span>
</Buttons>
  </div>

<Modal isOpen={isModalOpen} onClose={closeModal}>
<div>
  <div className="choke">
    {/* <Image src={L} className="choke" /> */}
  </div>
  <div className="welcome">
    Welcome, Complete your 2FA
  </div>
  <div className="Secure">
    Secure your account by adding a 2 Factor
    Authentication to your account.{' '}
  </div>
  <div className="mt-3">
    <Buttons
      type="primary"
      size="medium"
      style={{ width: '100%' }}
    >
      <span style={{ color: 'white' }}>Continue</span>
    </Buttons>
  </div>
  <div className="mt-3">
    <Buttons
      type="light"
      size="medium"
      style={{ width: '100%' }}
    >
      <span style={{ color: '#3693F7' }}>Skip</span>
    </Buttons>
  </div>
   </div>
 </Modal>

  );
}