import { useState } from 'react'
  import { Modal, ModalHeader } from 'p12-modal'
 
  export default function ModalHeaderExemple() {
    const [isOpen, setIsOpen] = useState(false)
 
    function onClose() {
      setIsOpen(false)
    }
 
    return (
      <>
        <button onClick={() => setIsOpen(true)} style={{
          border: 'black 2px solid',
          padding: '8px 20px',
          borderRadius: '50px',
        }}>Open
        </button>
        <Modal
          isOpen={isOpen}
          ariaLabel="Successfull modal when employee is created."
          onClose={onClose}
          zIndexOverlay="z-40"
          zIndexModal="z-50"
        >
          <ModalHeader>
            <h2 className="text-xl p-6 font-bold">I'm a modal</h2>
            <button
              onClick={onClose}
              className="absolute top-1 right-1 py-2 px-4 pointer text-xl transition ease-in-out delay-100 duration-200  text-gray-400 hover:text-black transparent border-none border-black rounded-md"
            >
              X
            </button>
          </ModalHeader>
          <div className="flex items-center h-full p-4">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, eaque, ipsam. Aperiam, autem consequuntur
              culpa debitis eligendi excepturi expedita laborum nemo quam reprehenderit sapiente ullam veniam. Aliquid,
              beatae, quidem. Rerum.
            </p>
          </div>
        </Modal>
      </>
    )
  }