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

type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

const FormDescription = forwardRef<HTMLParagraphElement, FormDescriptionProps>(
  ({ className, ...props }, ref) => {
    const { formDescriptionId } = useFormField();

    return (
      <p
        ref={ref}
        id={formDescriptionId}
        className={cx("text-muted-foreground text-sm", className)}
        {...props}
      />
    );
  },
);
FormDescription.displayName = "FormDescription";

export { FormDescription };