import React from 'react';
import { formatters } from '../../shared';

export interface TextEllipsisProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLSpanElement>,
    HTMLSpanElement
  > {
  size: number;
  children: string;
}

export const TextEllipsis = (props: TextEllipsisProps) => {
  const { children, size, ...rest } = props;

  return (
    <span {...rest}>
      {children.length > size
        ? formatters.toShortAddress(children, { size })
        : children}
    </span>
  );
};
