1
import type { ReactNode } from "react";
2
import { AlertTriangle } from "lucide-react";
3
import { Button } from "@/client/components/ui/button";
4
import { Dialog } from "@/client/components/ui/dialog";
5
 
6
interface ConfirmDialogProps {
7
  open: boolean;
8
  onConfirm: () => void;
9
  onCancel: () => void;
10
  title: string;
11
  description: string;
12
  confirmLabel?: string;
13
  variant?: "danger" | "warning";
14
  icon?: ReactNode;
15
}
16
 
17
export const ConfirmDialog = ({
18
  open,
19
  onConfirm,
20
  onCancel,
21
  title,
22
  description,
23
  confirmLabel = "Confirm",
24
  variant = "danger",
25
  icon,
26
}: ConfirmDialogProps) => (
27
  <Dialog open={open} onClose={onCancel} title={title} icon={icon ?? <AlertTriangle className="h-5 w-5" />}>
28
    <div className="space-y-4">
29
      <p className="text-sm text-zinc-400">{description}</p>
30
      <div className="flex justify-end gap-2 pt-2">
31
        <Button variant="ghost" onClick={onCancel}>
32
          Cancel
33
        </Button>
34
        <Button variant={variant === "danger" ? "danger" : "primary"} onClick={onConfirm}>
35
          {confirmLabel}
36
        </Button>
37
      </div>
38
    </div>
39
  </Dialog>
40
);