import { type MutableRefObject } from 'react';

/** Checks whether a text element is visually clamped (truncated by CSS). */
export const isTextClamped = (textRef: MutableRefObject<any>) => {
  if (!textRef?.current) return false;

  const element = textRef.current;
  return element.scrollHeight > element.clientHeight;
};

/** Splits text by newline characters and returns an array of React elements with `<br />` separators. */
export const mapNewLines = (text: string) => {
  if (!text) return [];

  return text.split('\n').map((item, i, arr) => {
    const line = <span key={i}>{item}</span>;

    if (i === arr.length - 1) {
      return line;
    }

    return [line, <br key={`${i}br`} />];
  });
};