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

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './field-label.css';

export interface FieldLabelProps {}

export const FieldLabel = forwardRef<'label', FieldLabelProps>(
  function FieldLabel({ as = 'label', className, children, ...rest }, ref) {
    const cn = clsx(className, css.label);

    return (
      <Box ref={ref} as={as} className={cn} {...rest}>
        {children}
      </Box>
    );
  },
);