import { t } from "@lingui/core/macro";
import { useFormState } from "react-hook-form";

import { ErrorCard } from "../ErrorCard.tsx";

/**
 * Renders the form's root error (set by {@link useApiForm}'s `submit` on a
 * thrown/failed request) through the shared {@link ErrorCard}. One consistent
 * place for server/submit errors across every form.
 */
export function FormError({ title }: { title?: string }) {
  const { errors } = useFormState();
  const message = errors.root?.message;
  if (!message) return null;
  return (
    <ErrorCard title={title ?? t`Something went wrong`} message={message} />
  );
}