import { css } from "@emotion/react";
import { useState, useEffect } from "react";
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
const ReadMore = function({
  line = 5,
  showReadMore = false,
  content,
  cssStyle,
  className,
  style
}) {
  const [isFold, setIsFold] = useState(false);
  const [foldVisible, setFoldVisible] = useState(false);
  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__ */ jsxs("div", { css: cssStyle, className, style, children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        id: "content",
        css: 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__ */ jsx(
      "span",
      {
        id: "readMore",
        css: 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"
      }
    )
  ] });
};
export {
  ReadMore
};
//# sourceMappingURL=index.js.map
