import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { Text } from '../text';
import * as css from './field-hint.css';

export interface FieldHintProps extends css.FieldHintVariants {}

export const FieldHint = forwardRef<typeof Text, FieldHintProps>(
  function FieldHint({ className, children, preserveSpace, ...rest }, ref) {
    const cn = clsx(className, css.fieldHint({ preserveSpace }));

    return (
      <Text ref={ref} className={cn} variant="body2" {...rest}>
        {children}
      </Text>
    );
  },
);