import React, { useEffect, useRef, useState } from "react";
export const ReadMore = ({ children, id, expandLabel, collapseLabel, }) => {
    const readmoreRef = useRef();
    const [dimensions, setDimensions] = useState({ height: 0 });
    useEffect(() => {
        if (readmoreRef.current) {
            setDimensions({
                height: readmoreRef.current.offsetHeight,
            });
        }
    }, []);
    return (React.createElement("div", { ref: readmoreRef }, dimensions.height > 400
        ? (React.createElement("article", { className: "has-read-more file-tree" },
            React.createElement("input", { type: "checkbox", className: "show-more", id: id }),
            React.createElement("section", null,
                children,
                React.createElement("label", { htmlFor: id, className: "expand-collapse" },
                    React.createElement("span", null, expandLabel),
                    React.createElement("span", null, collapseLabel)))))
        : (React.createElement("article", null,
            React.createElement("section", null, children)))));
};
