1
import { useSyncExternalStore } from "react";
2
import { Dialog } from "./ui/dialog";
3
import { Button } from "./ui/button";
4
import { dismissConfirm, getConfirmSnapshot, subscribeConfirm } from "./confirm-store";
5
 
6
export function ConfirmContainer() {
7
  const state = useSyncExternalStore(subscribeConfirm, getConfirmSnapshot);
8
 
9
  if (!state) return null;
10
 
11
  const variant = state.variant ?? "default";
12
 
13
  return (
14
    <Dialog open={state.open} onClose={() => dismissConfirm(false)} className="w-full max-w-sm p-5">
15
      <h2 className="text-base font-medium text-zinc-200">{state.title}</h2>
16
      <p className="mt-2 text-sm text-zinc-400">{state.message}</p>
17
      <div className="mt-5 flex justify-end gap-2">
18
        <Button variant="ghost" size="sm" onClick={() => dismissConfirm(false)}>
19
          {state.cancelLabel ?? "Cancel"}
20
        </Button>
21
        <Button variant={variant === "danger" ? "danger" : "secondary"} size="sm" onClick={() => dismissConfirm(true)}>
22
          {state.confirmLabel ?? "Confirm"}
23
        </Button>
24
      </div>
25
    </Dialog>
26
  );
27
}