import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import Text from '@bufferapp/ui/Text';
import { blueLight } from "@bufferapp/ui/style/colors";

const MAX_TEXT_LENGTH = 64;

const Container = styled.div`
  width: 100%;
  height: 100%;
  background: #fafcff;
  overflow: hidden;

  div {
    box-sizing: border-box;
    height: 100%;
    padding: 32px 20px 32px 16px;
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: ${blueLight}
    }
  }
`;

function formatText(text) {
  const formattedText = text.replace(/[\n⠀\s+(?=\s)]+/g, " ");
  return formattedText.length > MAX_TEXT_LENGTH
    ? `${formattedText.substring(0, MAX_TEXT_LENGTH)}...`
    : formattedText;
}

const Abstract = ({ text }) => (
  <Container>
    <div>
      <Text>
        <span dangerouslySetInnerHTML={{ __html: formatText(text) }} />
      </Text>
    </div>
  </Container>
);

Abstract.defaultProps = {
  text: "No text available",
};

Abstract.propTypes = {
  text: PropTypes.string,
};

export default Abstract;