import React from 'react';
import styled from 'styled-components';

interface IProps {
  children: React.ReactNode;
  maxLines?: 1 | 2 | 3 | 4 | 5;
  maxWidth: string;
  fontSize?: string;
  center?: boolean;
}

export const Ellipsis = ({
  children,
  maxLines = 1,
  maxWidth,
  fontSize,
  center,
}: IProps) => {
  return (
    <Container maxWidth={maxWidth} fontSize={fontSize} center={center}>
      <span className={`ellipsis-${maxLines}-lines`}>{children}</span>
    </Container>
  );
};

interface IContainerProps {
  maxWidth?: string;
  fontSize?: string;
  center?: boolean;
}

const Container = styled.span<IContainerProps>`
  display: block;
  margin: 0;

  .ellipsis-1-lines {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: ${props => props.maxWidth};
    font-size: ${props => props.fontSize};
    ${props => props.center && `margin: 0 auto;`}
  }

  .ellipsis-2-lines,
  .ellipsis-3-lines,
  .ellipsis-4-lines,
  .ellipsis-5-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: ${props => props.maxWidth};
    font-size: ${props => props.fontSize};
    line-height: 1.4;
  }

  .ellipsis-2-lines {
    -webkit-line-clamp: 2;
  }

  .ellipsis-3-lines {
    -webkit-line-clamp: 3;
  }

  .ellipsis-4-lines {
    -webkit-line-clamp: 4;
  }

  .ellipsis-5-lines {
    -webkit-line-clamp: 5;
  }
`;
