import { useT } from "@/context/translation-map";
import { Modal } from "../modal";
import { Button } from "../button";

interface ConfirmModalProps {
  text: string;
  onConfirm: () => void;
  onCancel: () => void;
  confirmText?: string;
  isOpen: boolean;
  loading?: boolean;
}

export const ConfirmModal = ({
  text,
  onCancel,
  onConfirm,
  confirmText,
  isOpen,
  loading,
}: ConfirmModalProps) => {
  const t = useT();
  if (!isOpen) return null;
  return (
    <Modal size="xsmall" isOpen={isOpen} onClose={onCancel}>
      <div className="p-5">
        <div className="mb-7 mt-2">
          <span className="text-base font-medium my-10 break-words" suppressHydrationWarning>
            {t(text)}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <Button disabled={loading} fullWidth size="small" onClick={onCancel} color="black">
            <span suppressHydrationWarning>{t("cancel")}</span>
          </Button>
          <Button fullWidth size="small" loading={loading} onClick={onConfirm}>
            <span suppressHydrationWarning>{t(confirmText || "confirm")}</span>
          </Button>
        </div>
      </div>
    </Modal>
  );
};
