import React, { forwardRef } 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 = forwardRef<HTMLDivElement, TruncateProps>(
  function Truncate({ className, children, lines = 1, ...rest }, ref) {
    return (
      <Box ref={ref} className={classNames(bem(cn), className)} {...rest}>
        <span
          style={{ WebkitLineClamp: lines }}
          className={classNames(bem(cn, { e: "inner" }))}
        >
          {children}
        </span>
      </Box>
    );
  },
);