ConfirmDialog.tsx

'use client';

import * as Dialog from '@radix-ui/react-dialog';
import { X, AlertTriangle } from 'lucide-react';
import { cn } from '@/lib/utils';
import { OpenSurface } from '@/components/ui/OpenSurface';

interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  variant?: 'danger' | 'default';
  onConfirm: () => void;
  isLoading?: boolean;
}

export function ConfirmDialog({
  open,
  onOpenChange,
  title,
  description,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  variant = 'default',
  onConfirm,
  isLoading = false,
}: ConfirmDialogProps) {
  const handleConfirm = () => {
    onConfirm();
    if (!isLoading) {
      onOpenChange(false);
    }
  };

  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 z-[100] bg-black/50 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
        <Dialog.Content
          className={cn(
            'fixed left-1/2 top-1/2 z-[101] w-[90vw] max-w-[400px] -translate-x-1/2 -translate-y-1/2',
            'focus:outline-none',
            'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out',
            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
          )}
        >
          <OpenSurface
            className={cn(
              't-modal relative',
              'bg-bg-secondary rounded-2xl',
              'border border-bg-tertiary',
              'shadow-2xl',
              'p-6',
            )}
          >
            {/* Close button */}
            <Dialog.Close asChild>
              <button
                className="absolute top-4 right-4 p-1.5 rounded-lg hover:bg-bg-tertiary transition-colors"
                aria-label="Close"
              >
                <X className="w-4 h-4 text-text-quaternary" />
              </button>
            </Dialog.Close>

            {/* Icon */}
            <div
              className={cn(
                'w-12 h-12 rounded-full flex items-center justify-center mb-4',
                variant === 'danger' ? 'bg-error/10' : 'bg-white/[0.08]',
              )}
            >
              <AlertTriangle
                className={cn(
                  'w-6 h-6',
                  variant === 'danger' ? 'text-error' : 'text-text-primary',
                )}
              />
            </div>

            {/* Title */}
            <Dialog.Title className="text-lg font-semibold text-text-primary mb-2">
              {title}
            </Dialog.Title>

            {/* Description */}
            <Dialog.Description className="text-sm text-text-tertiary mb-6">
              {description}
            </Dialog.Description>

            {/* Actions */}
            <div className="flex gap-3">
              <Dialog.Close asChild>
                <button
                  className={cn(
                    'flex-1 px-4 py-2.5 rounded-xl',
                    'bg-bg-tertiary hover:bg-bg-quaternary',
                    'text-text-secondary text-sm font-medium',
                    'transition-colors',
                  )}
                >
                  {cancelLabel}
                </button>
              </Dialog.Close>
              <button
                onClick={handleConfirm}
                disabled={isLoading}
                className={cn(
                  'flex-1 px-4 py-2.5 rounded-xl',
                  'text-white text-sm font-medium',
                  'transition-colors',
                  'disabled:opacity-50 disabled:cursor-not-allowed',
                  variant === 'danger'
                    ? 'bg-error hover:bg-error/90'
                    : 'bg-text-primary text-bg-primary hover:bg-text-primary/90',
                )}
              >
                {isLoading ? (
                  <span className="flex items-center justify-center gap-2">
                    <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    <span>Clearing...</span>
                  </span>
                ) : (
                  confirmLabel
                )}
              </button>
            </div>
          </OpenSurface>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}