Dialog

Cần system feedback overlay?
├─ Confirm hành động → Dialog (confirm)
├─ Thông báo kết quả (success/error) → Dialog (alert) 
├─ Nhập giá trị đơn giản (1 field) → Dialog (prompt)
└─ Permission / consent → Dialog (confirm)

┌─────────────────────────────────┐
│  ◉ [Lead Icon]                  │  ← Optional. Dùng lead-icon component
│                                 │     (circle, semantic muted bg)
│  Title                          │  ← Required. Ngắn gọn, rõ ràng
│  Description text here...       │  ← Optional. 1-2 câu giải thích
│                                 │
│  [Input field]                  │  ← Only for variant=prompt
│                                 │
│           [Cancel]  [Confirm]   │  ← Action buttons, trailing (web)
└─────────────────────────────────┘

<!-- HTML skeleton with data-slot -->
<div class="surface-dialog" data-slot="dialog" role="alertdialog" aria-modal="true">
  <div class="ds-leadicon ds-leadicon--lg" data-slot="dialog-icon">⚠</div>
  <div class="slot-body" data-slot="dialog-content">
    <h2 data-slot="dialog-title">Confirm?</h2>
    <p data-slot="dialog-description">This action cannot be undone.</p>
  </div>
  <div class="slot-footer" data-slot="dialog-actions">
    <button class="btn btn--outline">Cancel</button>
    <button class="btn btn--destructive">Delete</button>
  </div>
</div>

interface DialogProps {
  /** Mở/đóng */
  open: boolean;
  /** Callback khi close */
  onClose: () => void;
  /** Variant */
  variant?: 'confirm' | 'alert' | 'prompt';
  /** Severity (chỉ cho variant=alert) */
  severity?: 'info' | 'success' | 'warning' | 'destructive';
  /** Size */
  size?: 'sm' | 'md' | 'lg';
  /** Title — bắt buộc */
  title: string;
  /** Description */
  description?: string;
  /** Confirm button text */
  confirmText?: string; // default: "Xác nhận"
  /** Cancel button text */
  cancelText?: string; // default: "Huỷ"
  /** Confirm button variant (liên kết với button component) */
  confirmVariant?: 'primary' | 'destructive';
  /** Callback khi confirm */
  onConfirm?: () => void;
  /** Close on backdrop click — false cho confirm variant */
  closeOnBackdrop?: boolean;
  /** Close on Escape key */
  closeOnEscape?: boolean; // default: true
}

interface DialogPromptProps extends DialogProps {
  variant: 'prompt';
  /** Input label */
  inputLabel?: string;
  /** Input placeholder */
  inputPlaceholder?: string;
  /** Input default value */
  inputDefaultValue?: string;
  /** Callback với input value khi confirm */
  onConfirm: (value: string) => void;
}

{/* Confirm delete */}
<Dialog
  open={isOpen}
  onClose={close}
  variant="confirm"
  severity="destructive"
  title="Xoá giao dịch?"
  description="Hành động này không thể hoàn tác. Giao dịch #VNP12345 sẽ bị xoá vĩnh viễn."
  confirmText="Xoá"
  confirmVariant="destructive"
  onConfirm={handleDelete}
/>

{/* Success alert */}
<Dialog
  open={isOpen}
  onClose={close}
  variant="alert"
  severity="success"
  title="Giao dịch thành công!"
  description="Số tiền 500,000₫ đã được chuyển đến tài khoản người nhận."
  confirmText="Đóng"
/>

{/* Error alert */}
<Dialog
  open={isOpen}
  onClose={close}
  variant="alert"
  severity="destructive"
  title="Thanh toán thất bại"
  description="Không thể kết nối đến ngân hàng. Vui lòng thử lại sau."
  confirmText="Thử lại"
  cancelText="Huỷ"
  onConfirm={retry}
/>

{/* Prompt input */}
<Dialog
  open={isOpen}
  onClose={close}
  variant="prompt"
  title="Nhập lý do huỷ"
  description="Vui lòng cho chúng tôi biết lý do huỷ giao dịch."
  inputPlaceholder="Nhập lý do..."
  confirmText="Gửi"
  onConfirm={(value) => handleCancel(value)}
/>

{/* Permission request */}
<Dialog
  open={isOpen}
  onClose={close}
  variant="confirm"
  severity="info"
  title="Cho phép truy cập vị trí?"
  description="Ứng dụng cần truy cập vị trí để tìm ATM gần nhất."
  confirmText="Cho phép"
  cancelText="Từ chối"
  onConfirm={requestLocation}
/>