import { useSyncExternalStore } from "react";
import { useTranslation } from "react-i18next";
import { dismissError, getError, subscribeError } from "../lib/errorDialog";
import Modal from "./Modal";

// Renders the current app error (if any) as a modal the user must acknowledge.
export default function ErrorDialog() {
  const { t } = useTranslation();
  const err = useSyncExternalStore(subscribeError, getError, getError);
  if (!err) return null;
  return (
    <Modal title={err.title} onClose={dismissError} maxWidth="max-w-md">
      <p className="text-sm leading-relaxed text-fg/90">{err.message}</p>
      <div className="flex justify-end mt-5">
        <button
          onClick={dismissError}
          className="px-4 py-2 rounded-lg bg-accent text-accent-fg text-sm font-medium hover:opacity-90 transition"
        >
          {t("errors.ok")}
        </button>
      </div>
    </Modal>
  );
}