import { Button } from "@/components/common/Button";
import { useUIStore } from "@/stores/uiStore";

export function ConfirmDialogHost() {
  const confirm = useUIStore((s) => s.confirm);
  const resolveConfirm = useUIStore((s) => s.resolveConfirm);

  if (!confirm) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="w-full max-w-sm rounded-2xl border border-border bg-surface p-5 shadow-[var(--shadow-panel)]">
        <h2 className="text-sm font-semibold text-fg">{confirm.title}</h2>
        <p className="mt-2 text-sm text-fg-muted">{confirm.message}</p>
        <div className="mt-5 flex justify-end gap-2">
          <Button variant="ghost" onClick={() => resolveConfirm(false)}>
            {confirm.cancelLabel ?? "Cancel"}
          </Button>
          <Button variant={confirm.danger ? "danger" : "primary"} onClick={() => resolveConfirm(true)}>
            {confirm.confirmLabel ?? "Confirm"}
          </Button>
        </div>
      </div>
    </div>
  );
}