import * as React from 'react';

export interface TableHeaderCellTitleProps {
  /**
   * Element to display above the name in the header cell.
   */
  overline?: React.ReactNode;
  /**
   * The name to display in the header cell.
   * Displays below the overline if provided and is bolded.
   */
  name?: React.ReactNode;
}

export const TableHeaderCellTitle: React.FC<TableHeaderCellTitleProps> = ({ overline, name, ...rest }) => {
  return overline ? (
    <span {...rest} className='th__overLineWrapper'>
      <span className='th__overline'>{overline}</span>
      {name}
    </span>
  ) : (
    name
  );
};