import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const AutoScalingText = (param)=>{
    let { children } = param;
    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)();
    const [scale, setScale] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(1);
    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
        const observer = new ResizeObserver((entries)=>{
            const node = entries[0].target;
            const parentNode = node.parentNode;
            const availableWidth = parentNode.offsetWidth;
            const actualWidth = node.offsetWidth;
            const actualScale = availableWidth / actualWidth;
            setScale((scale)=>{
                if (actualScale < 1) return actualScale;
                if (scale < 1) return 1;
            });
        });
        const node = ref.current;
        observer.observe(node);
        return ()=>observer.unobserve(node);
    }, []);
    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
        className: "auto-scaling-text",
        style: {
            transition: 'transform 0.5s ease',
            transform: "scale(".concat(scale, ",").concat(scale, ")")
        },
        ref: ref,
        children: children
    });
};
export { AutoScalingText };
