src/components/common/ConfirmDialog.tsx

import React from 'react';
import { useTheme, Dialog, Paragraph, Button, Portal } from 'react-native-paper';

export interface ConfirmDialogProps {
  /** Whether the dialog is visible */
  visible: boolean;
  /** Dialog title */
  title: string;
  /** Dialog body message */
  message: string;
  /** Label for the confirm button (default: "Confirm") */
  confirmLabel?: string;
  /** Label for the cancel button (default: "Cancel") */
  cancelLabel?: string;
  /** Callback when confirm is pressed */
  onConfirm: () => void;
  /** Callback when cancel / dismiss is pressed */
  onCancel: () => void;
  /** If true, the confirm button uses error colour (destructive action) */
  destructive?: boolean;
}

/**
 * Reusable confirmation dialog using Paper's Dialog + Portal.
 * Supports both normal and destructive (error-coloured) confirm actions.
 */
export function ConfirmDialog({
  visible,
  title,
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  onConfirm,
  onCancel,
  destructive = false,
}: ConfirmDialogProps) {
  const theme = useTheme();

  return (
    <Portal>
      <Dialog visible={visible} onDismiss={onCancel}>
        <Dialog.Title>{title}</Dialog.Title>
        <Dialog.Content>
          <Paragraph style={{ color: theme.colors.onSurfaceVariant }}>
            {message}
          </Paragraph>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onPress={onCancel} textColor={theme.colors.onSurfaceVariant}>
            {cancelLabel}
          </Button>
          <Button
            onPress={onConfirm}
            textColor={destructive ? theme.colors.error : theme.colors.primary}
          >
            {confirmLabel}
          </Button>
        </Dialog.Actions>
      </Dialog>
    </Portal>
  );
}