Usage

import { Modal, FullscreenModal, DialogModal, useModal } from "@/components/Modal";

// Hook for managing modal state
const modal = useModal();

// Centered Modal (forms, content)
<Modal isOpen={modal.isOpen} onClose={modal.close}>
  <div className="p-6">Modal content</div>
</Modal>

// Dialog Modal (confirmations)
<DialogModal
  isOpen={modal.isOpen}
  onClose={modal.close}
  title="Confirm"
  description="Are you sure?"
  actions={<>
    <button onClick={modal.close}>Cancel</button>
    <button onClick={handleConfirm}>Confirm</button>
  </>}
/>

// Fullscreen Modal (multi-step flows)
<FullscreenModal
  isOpen={modal.isOpen}
  onClose={modal.close}
  title="Step 1 of 3"
>
  <div>Full page content</div>
</FullscreenModal>