import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import { Tooltip } from '@/mui/components';

import styles from './TextTooltip.module.scss';

function TextTooltip(props) {
  const nameContainerRef = useRef(undefined);

  return (
    <div ref={nameContainerRef} className={styles.TextTooltipContainer}>
      {nameContainerRef.current?.scrollHeight > nameContainerRef.current?.offsetHeight ? (
        <Tooltip placement="top" title={props.text}>
          <span>{`${props.text.slice(0, -5)}...`}</span>
        </Tooltip>
      ) : (
        <span>{props.text}</span>
      )}
    </div>
  );
}

TextTooltip.propTypes = {
  text: PropTypes.string.isRequired,
};

export default TextTooltip;
