"use client";

import { cx } from "@karma/cva";
import { forwardRef } from "react";
import { useFormField } from "./useFormField";

type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;

const FormMessage = forwardRef<HTMLParagraphElement, FormMessageProps>(
  ({ className, children, ...props }, ref) => {
    const { error, formMessageId } = useFormField();
    const body = error ? String(error?.message) : children;

    if (!body) {
      return null;
    }

    return (
      <p
        ref={ref}
        id={formMessageId}
        className={cx("text-sm font-medium text-error", className)}
        {...props}
      >
        {body}
      </p>
    );
  },
);
FormMessage.displayName = "FormMessage";

export { FormMessage };