Build a Modal dialog

import React, { useState } from 'react';
import Modal from './src/Modal';

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Modal Demo</h1>
      <button onClick={() => setOpen(true)} style={{ padding: '8px 16px', cursor: 'pointer' }}>
        Open modal
      </button>
      <Modal open={open} onClose={() => setOpen(false)} title="Confirm action">
        <p>Are you sure you want to continue? This is a controlled modal.</p>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button onClick={() => setOpen(false)} style={{ padding: '6px 14px', cursor: 'pointer' }}>Cancel</button>
          <button onClick={() => setOpen(false)} style={{ padding: '6px 14px', cursor: 'pointer', background: '#2563eb', color: '#fff', border: 'none', borderRadius: 4 }}>Confirm</button>
        </div>
      </Modal>
    </div>
  );
}