import { ConfirmContainer, confirm } from 'react-confirm-lite';

function App() {
  async function handleAction() {
    const result = await confirm('Are you sure?');
    
    if (result) {
      console.log('User confirmed!');
    } else {
      console.log('User cancelled!');
    }
  }
  return (
    <div>
      {/* Your app content */}
      <ConfirmContainer />
    </div>
  );
}

const result = await confirm('Message here');
// Returns true for OK, false for Cancel, null for ESC/outside click

// These will show sequentially
await confirm('First?');
await confirm('Second?');
await confirm('Third?');

const result = await confirm('Delete this item?');
if (result) {
  // User clicked OK
  deleteItem();
} else if (result === false) {
  // User clicked Cancel
  console.log('Cancelled');
} else if (result === null) {
  // User pressed ESC or clicked outside
  console.log('Closed via ESC/backdrop');
}

const result = await confirm({
  title: 'Delete Account',
  message: 'This will permanently delete your account and all data.',
  okText: 'Delete Forever',
  cancelText: 'Cancel',
  colorSchema: 'red'
});

<ConfirmContainer 
  closeOnEscape={false}
  closeOnClickOutside={false}
/>
// Now dialog can only be closed with Cancel/OK buttons

// String input (simple)
await confirm('Simple message');

// Object input (full options)
await confirm({
  title: 'Custom Title',           // Optional
  message: 'Required message',     // Required
  okText: 'Proceed',               // Optional
  cancelText: 'Go Back',           // Optional
  colorSchema: 'blue',             // Optional
});

<ConfirmContainer 
  classes={{
    overlay: "my-overlay-class",    // Background overlay
    wrapper: "my-modal-class",      // Modal container
    title: "my-title-class",        // Title text
    message: "my-message-class",    // Message text
    button: "my-button-class",      // Both buttons
    cancel: "my-cancel-class",      // Cancel button only
    ok: "my-ok-class",              // OK button only
  }}
/>

<ConfirmContainer animationDuration={500}>
  {({ 
    isVisible, 
    confirm, 
    handleCancel, 
    handleOk, 
    containerRef, 
    animationClass, 
    animationStyle 
  }) => (
    <div className={`modal-overlay ${isVisible ? 'show' : 'hide'}`}>
      {/* Your custom backdrop */}
      <div className="backdrop" onClick={handleCancel} />
      
      {/* Your custom modal */}
      <div 
        ref={containerRef}
        className={`custom-modal ${animationClass}`}
        style={animationStyle}
      >
        <h2>{confirm.title}</h2>
        <p>{confirm.message}</p>
        
        <div className="buttons">
          <button onClick={handleCancel}>
            {confirm.cancelText || 'Cancel'}
          </button>
          <button onClick={handleOk}>
            {confirm.okText || 'OK'}
          </button>
        </div>
      </div>
    </div>
  )}
</ConfirmContainer>

const handleDelete = async () => {
  // Force user to make explicit choice
  const result = await confirm({
    title: 'Delete Item',
    message: 'This action cannot be undone. Are you sure?',
    okText: 'Delete',
    cancelText: 'Keep',
    colorSchema: 'red'
  });

  // Result can only be true or false (no null since ESC/backdrop disabled)
  if (result) {
    await deleteItem();
  }
};

// In your component
<ConfirmContainer closeOnEscape={false} closeOnClickOutside={false} />

// Allow closing by clicking backdrop but not ESC
<ConfirmContainer closeOnEscape={false} closeOnClickOutside={true} />

const handleSubmit = async () => {
  const result = await confirm({
    title: 'Submit Form',
    message: 'Ready to submit this form?',
    okText: 'Submit',
    cancelText: 'Review',
    colorSchema: 'green'
  });

  if (result) {
    await submitForm();
  } else if (result === null) {
    // User clicked backdrop
    console.log('Closed by clicking outside');
  }
};

// Global: ESC and backdrop disabled
<ConfirmContainer 
  closeOnEscape={false} 
  closeOnClickOutside={false} 
/>

// Some dialogs can override via custom UI
const handleFlexibleDialog = async () => {
  // Create custom UI that allows ESC/backdrop
  const result = await confirm('Flexible dialog?');
  // result can be true, false, or null
};

<ConfirmContainer
  defaultColorSchema="light"        // Light theme by default
  animation="zoom"                  // Zoom animation for all dialogs
  animationDuration={400}           // 400ms animations
  closeOnEscape={true}              // Allow ESC to close
  closeOnClickOutside={true}        // Allow backdrop click to close
  animationDurationIn={350}         // Enter: 350ms
  animationDurationOut={250}        // Exit: 250ms
  lockScroll={false}                // true by default
/>

// Option 1: Fully closable (default)
<ConfirmContainer closeOnEscape={true} closeOnClickOutside={true} />
// Users can close via: OK, Cancel, ESC, or backdrop click

// Option 2: Force explicit choice
<ConfirmContainer closeOnEscape={false} closeOnClickOutside={false} />
// Users can only close via: OK or Cancel buttons

// Option 3: Backdrop only
<ConfirmContainer closeOnEscape={false} closeOnClickOutside={true} />
// Users can close via: OK, Cancel, or backdrop click

// Option 4: ESC only
<ConfirmContainer closeOnEscape={true} closeOnClickOutside={false} />
// Users can close via: OK, Cancel, or ESC key

// app/layout.tsx
import { ConfirmContainer } from 'react-confirm-lite';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <ConfirmContainer />
      </body>
    </html>
  );
}

// Server actions
'use server';
import { confirm } from 'react-confirm-lite';

export async function serverAction() {
  const result = await confirm('Confirm from server?');
  if (result) {
    // Perform action
  } else if (result === null) {
    // User pressed ESC or clicked outside
    console.log('Action cancelled');
  }
}

// Old way (always returns true/false)
if (window.confirm('Delete?')) {
  deleteItem();
}

// New way (returns true/false/null)
const result = await confirm('Delete?');
if (result === true) {
  await deleteItem();
} else if (result === false) {
  console.log('User clicked Cancel');
} else if (result === null) {
  console.log('User pressed ESC');
}