import clsx from 'clsx';
import React from 'react';
import classes from './FormGroupTitle.scss';

export interface FormGroupTitleProps {
  className?: string;
  /** Group title to display */
  title: string;
}

/**
 * A simple component to display a title for a form group.
 *
 * @deprecated This component is deprecated in favor of using the `title` prop of the `FormGroup` component for new code. Note that `FormGroup` also renders container/content markup (and may wrap children in a grid), so it is not a drop-in replacement for usages that render only a standalone title. When migrating, wrap the related fields in a `FormGroup` and pass the desired section title via its `title` prop.
 */
export const FormGroupTitle: React.FC<FormGroupTitleProps> = ({
  className = '',
  title,
}) => (
  <div
    className={clsx(classes.container, 'FormGroupTitle-container', className)}
  >
    {title}
  </div>
);
