import { Box, BoxProps } from '@wix/design-system';
import { BaseComponentProps, MaxLines, MaxLinesProps } from '../MaxLines';
import React from 'react';

export interface ModalHeadingBoxProps<P extends BaseComponentProps>
  extends Partial<BoxProps> {
  children: MaxLinesProps<P>['children'];
  maxLines?: MaxLinesProps<P>['maxLines'];
  lineHeight: MaxLinesProps<P>['lineHeight'];
}

export function ModalHeadingBox<P extends BaseComponentProps>(
  props: ModalHeadingBoxProps<P>,
) {
  const { children, maxLines, lineHeight, ...rest } = props;

  return (
    <Box minWidth={0} boxSizing="border-box" direction="vertical" {...rest}>
      <MaxLines
        webkitLineClamp={false}
        lineHeight={lineHeight}
        maxLines={maxLines}
        wordBreak="break-word"
      >
        {children}
      </MaxLines>
    </Box>
  );
}