import styled from 'styled-components';
import { Text, TextProps } from '../Text';

interface EllipsisTextProps extends TextProps {
  multiline?: number;
}

// COMPATIBILITY ISSUE: this does not work with IE
export const EllipsisText = styled(Text)<EllipsisTextProps>`
  display: ${({ multiline }: EllipsisTextProps) =>
    multiline ? '-webkit-box' : null};
  -webkit-line-clamp: ${({ multiline }: EllipsisTextProps) =>
    multiline ?? null};
  -webkit-box-orient: ${({ multiline }: EllipsisTextProps) =>
    multiline ? 'vertical' : null};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: ${({ multiline }: EllipsisTextProps) =>
    multiline ? null : 'nowrap'};
`;

EllipsisText.defaultProps = {
  ...Text.defaultProps,
  as: 'div',
};
