"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const react = require("@emotion/react");
const React = require("react");
const jsxRuntime = require("@emotion/react/jsx-runtime");
const ReadMore = function({
  line = 5,
  showReadMore = false,
  content,
  cssStyle
}) {
  const [isFold, setIsFold] = React.useState(false);
  const [foldVisible, setFoldVisible] = React.useState(false);
  React.useEffect(() => {
    if (content) {
      const arr = content.match(/\n/g);
      if (content.length >= 194 || arr && arr.length >= 3) {
        setIsFold(true);
        setFoldVisible(true);
      } else {
        setIsFold(false);
        setFoldVisible(false);
      }
    }
  }, [content]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      css: react.css`
        ${cssStyle}
      `,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            id: "content",
            css: react.css`
          display: -webkit-box;
          overflow: hidden;
          font-family: Poppins;
          font-size: 14px;
          line-height: 21px;
          color: #000000;
          opacity: 0.6;
          text-overflow: ellipsis;
          white-space: pre-line;
          -webkit-line-clamp: ${isFold ? line : "none"};
          -webkit-box-orient: vertical;
        `,
            children: content
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          "span",
          {
            id: "readMore",
            css: react.css`
          display: ${showReadMore && foldVisible ? "inline" : "none"};
          font-size: 14px;
          /* color: #d3c8d9; */
          font-family: Poppins-SemiBold;
          color: #000000;
          cursor: pointer;
        `,
            onClick: () => {
              setIsFold(!isFold);
            },
            children: isFold ? "Read more" : "Fold"
          }
        )
      ]
    }
  );
};
exports.ReadMore = ReadMore;
//# sourceMappingURL=index.js.map
