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

// 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 initialFocus="close" title={err.title} onClose={dismissError} maxWidth="max-w-md">
      <p className="text-sm leading-relaxed text-fg/90">{err.message}</p>
      <ModalFooter>
        <Button onClick={dismissError}>{t("errors.ok")}</Button>
      </ModalFooter>
    </Modal>
  );
}