import React, { useState } from "react";
const ExpandableText = (props) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const maxLength = props.maxLength || 80;
    if (!props.text || props.text === "-") {
        return React.createElement("span", { className: "text-gray-400" }, "-");
    }
    const isLong = props.text.length > maxLength;
    const baseTextClass = props.className || "text-sm text-gray-900";
    if (!isLong) {
        return React.createElement("span", { className: baseTextClass }, props.text);
    }
    const truncated = props.text.substring(0, maxLength).replace(/\s+$/u, "") + "…";
    return (React.createElement("span", { className: "inline align-baseline" },
        React.createElement("span", { className: `${baseTextClass} break-words align-baseline` }, isExpanded ? props.text : truncated),
        React.createElement("button", { type: "button", onClick: () => {
                setIsExpanded(!isExpanded);
            }, "aria-expanded": isExpanded, className: "ml-2 inline-flex items-center gap-1 align-baseline rounded text-xs font-medium text-indigo-600 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors" },
            React.createElement("span", null, isExpanded ? "Show less" : "Show more"),
            React.createElement("svg", { className: `w-3 h-3 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.25, "aria-hidden": "true" },
                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })))));
};
export default ExpandableText;
//# sourceMappingURL=ExpandableText.js.map