import React from 'react';
import { createRoot } from 'react-dom/client';
import ModalProvider, { useModal } from 'mui-modal-provider';
import Dialog, { DialogProps } from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';

interface SimpleDialogProps extends DialogProps {
  title: string,
};

// Create the dialog you want to use
const SimpleDialog: React.FC<SimpleDialogProps> = ({ title, ...props }) => (
  <Dialog {...props}>
    <DialogTitle>{title}</DialogTitle>
  </Dialog>
);

// Use modal hook and show the dialog
const App = () => {
  const { showModal } = useModal();

  return (
    <Button
      variant="contained"
      onClick={() => showModal(SimpleDialog, { title: 'Simple Dialog' })}
      color="primary"
    >
      simple dialog
    </Button>
  );
};

const container = document.getElementById('root');
const root = createRoot(container);

// Wrap the app with modal provider
root.render(
  <ModalProvider>
    <App />
  </ModalProvider>
);