// components/admin/page-builder/DeleteConfirmationModal.tsx
interface DeleteConfirmationModalProps {
  isOpen: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  componentName: string;
}

export function DeleteConfirmationModal({
  isOpen,
  onConfirm,
  onCancel,
  componentName
}: DeleteConfirmationModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="fixed inset-0 bg-black/50 transition-opacity" onClick={onCancel} />
      <div className="flex min-h-full items-center justify-center p-4">
        <div className="relative bg-var-surface rounded-lg shadow-var-modal max-w-md w-full">
          <div className="p-6">
            <div className="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-var-danger-bg rounded-full">
              <svg className="w-6 h-6 text-var-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.998-.833-2.732 0L4.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-var-text text-center mb-2">Delete Component</h3>
            <p className="text-var-text-muted text-center">
              Are you sure you want to delete the <span className="font-medium">{componentName}</span> component? 
              This action cannot be undone.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-3 p-6 pt-0">
            <button
              type="button"
              onClick={onCancel}
              className="flex-1 px-4 py-2.5 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-lg hover:bg-var-surface-hover transition-colors"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={onConfirm}
              className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-var-danger rounded-lg hover:bg-var-danger-hover transition-colors"
            >
              Delete Component
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}