Dialog - Copy this React, Tailwind Component to your project

# Dialog Component Prompt (MVC Pattern Functional) ## Context Design a **Dialog** component for a React application using TypeScript and the MVC pattern. The dialog will be a window overlaid on the primary window or another dialog window, rendering the content underneath inert. It will support various features such as modals, alerts, and confirmation dialogs. ## Goals 1. Implement the **MVC pattern** in a functional style to manage the dialog state and interactions. 2. Provide a reusable, customizable dialog component that can be used for different purposes (e.g., confirmation, alert, form submission). 3. Ensure the dialog is accessible, user friendly, and responsive. ## MVC Design Breakdown ### Model The **model** will manage the dialog's visibility, type (e.g., modal, alert, confirmation), content, and any user interactions (e.g., actions taken on buttons). ### View The **view** will render the dialog window with the provided content, actions, and appearance. It will also ensure that the content underneath the dialog is inert (e.g., grayed out). ### Controller The **controller** will handle the user interactions, such as opening, closing, or taking actions within the dialog (e.g., submitting a form, confirming an action). ## Props Interface ```typescript interface DialogProps { isOpen: boolean; // Whether the dialog is open or closed onClose: () => void; // Callback when the dialog is closed title?: string; // Optional title for the dialog content?: React.ReactNode; // Content of the dialog actions?: Array<{ label: string; // Label for the action button onClick: () => void; // Callback for the action button primary?: boolean; // Whether this action is primary (e.g., a confirm button) }>; size?: 'sm' | 'md' | 'lg'; // Size of the dialog backdrop?: boolean; // Whether to show a backdrop behind the dialog onBackdropClick?: () => void; // Optional callback when the backdrop is clicked closeOnEsc?: boolean; // Whether to close the dialog when pressing the ESC key closeOnBackdrop?: boolean; // Whether to close the dialog when clicking the backdrop isLoading?: boolean; // Whether to show a loading state (useful for async operations) disableEscClose?: boolean; // Prevent closing dialog via ESC key disableBackdropClose?: boolean; // Prevent closing dialog via backdrop click }