import { useTranslation } from "react-i18next";

import { errorMessageKey } from "../api/error-message";

/** Renders a caught mutation error as an inline alert, or nothing when error is falsy.
 *  Replaces the duplicated `<p role="alert" className="text-xs text-destructive">` markup. */
export function MutationError({ error }: { error: unknown }) {
  const { t } = useTranslation();
  if (!error) return null;
  const { key, opts } = errorMessageKey(error);
  return (
    <p role="alert" className="text-xs text-destructive">
      {t(key, opts)}
    </p>
  );
}