interface ConfirmDialogProps {
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  danger?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export function ConfirmDialog({ title, message, confirmLabel = "Confirm", cancelLabel = "Cancel", danger, onConfirm, onCancel }: ConfirmDialogProps) {
  return (
    <div class="fixed inset-0 z-50 flex items-center justify-center" onClick={onCancel}>
      {/* Backdrop */}
      <div class="absolute inset-0" style={{ background: "rgba(0,0,0,0.5)", backdropFilter: "blur(4px)" }} />
      {/* Dialog */}
      <div
        class="relative max-w-sm w-full mx-4 rounded-[var(--z-radius-card)] p-5"
        style={{ background: "var(--z-surface)", border: "var(--z-card-border)", boxShadow: "var(--z-card-shadow)" }}
        onClick={(e) => e.stopPropagation()}
      >
        <h3 class="text-sm font-semibold mb-2">{title}</h3>
        <p class="text-[var(--z-font-md)] mb-5" style={{ color: "var(--z-muted)" }}>{message}</p>
        <div class="flex gap-2 justify-end">
          <button
            onClick={onCancel}
            class="px-4 py-2 text-xs rounded-[var(--z-radius-button)] transition-colors"
            style={{ background: "var(--z-card-bg)", color: "var(--z-muted)", border: "1px solid var(--z-border)" }}
          >
            {cancelLabel}
          </button>
          <button
            onClick={onConfirm}
            class="px-4 py-2 text-xs rounded-[var(--z-radius-button)] font-medium text-white transition-colors"
            style={{ background: danger ? "#ef4444" : "var(--z-accent)" }}
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}
