/* eslint-disable react/require-default-props */
import React from 'react';
import styled from 'styled-components';

interface IProps {
  maxLines?: number;
  children: React.ReactNode;
}

export const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {
  return <Container maxLines={maxLines}>{children}</Container>;
};

interface IContainerProps {
  maxLines: number;
}

const Container = styled.div<IContainerProps>`
  display: -webkit-box;
  max-width: 100%;
  max-height: 100%;
  -webkit-line-clamp: ${props => props.maxLines};
  -webkit-box-orient: vertical;
  overflow: hidden;
`;
