import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bem } from "../../utilities/bem";

const cn = "Truncate";

export interface TruncateProps extends BoxProps {
  lines?: number;
}

export const Truncate = ({
  className,
  children,
  lines = 1,
  ...rest
}: TruncateProps) => {
  return (
    <Box className={classNames(bem(cn), className)} {...rest}>
      <span
        style={{ WebkitLineClamp: lines }}
        className={classNames(bem(cn, { e: "inner" }))}
      >
        {children}
      </span>
    </Box>
  );
};