import { useFormContext, useStoreState } from "@ariakit/react";
import { cx } from "../class-names.ts";
import { submitErrorAlert } from "./style.css.ts";

export type SubmitErrorMessageProps = {
  name: string;
  className?: string;
};

export function SubmitErrorAlert(props: SubmitErrorMessageProps) {
  const form = useFormContext();
  const message = useStoreState(form, (s) => {
    return s?.errors[props.name] as string | undefined;
  });

  return (
    <div role="alert" {...cx(props, submitErrorAlert.container)}>
      {message}
    </div>
  );
}