import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./OsTree.scss";
const OsTree = ({ rootLabel, childrenLabels, align = "center", direction = "horizontal", }) => {
    const count = childrenLabels.length;
    if (direction === "vertical") {
        return (_jsxs("div", { className: "ff-os-tree-vertical", style: { "--child-count": count }, children: [_jsxs("div", { className: `ff-os-tree-vertical__row ff-os-tree-vertical__row--${align}`, children: [_jsx("div", { className: "ff-os-tree-vertical__root-label", children: rootLabel }), _jsx("div", { className: "ff-os-tree-vertical__horizontal-line" })] }), _jsxs("div", { className: "ff-os-tree-vertical__vertical-line-wrapper", children: [_jsx("div", { className: "ff-os-tree-vertical__vertical-line" }), childrenLabels.map((label, index) => (_jsxs("div", { className: "ff-os-tree-vertical__child", children: [_jsx("div", { className: "ff-os-tree-vertical__child-connector" }), _jsx("div", { className: "ff-os-tree-vertical__child-label", children: label })] }, index)))] })] }));
    }
    return (_jsxs("div", { className: `ff-os-tree ff-os-tree--${align}`, style: { "--child-count": count }, children: [_jsxs("div", { className: "ff-os-tree__root-wrapper", children: [_jsx("div", { className: "ff-os-tree__root-label", children: rootLabel }), _jsx("div", { className: "ff-os-tree__vertical-root" })] }), _jsx("div", { className: "ff-os-tree__horizontal-connector", children: childrenLabels.map((_, index) => (_jsx("div", { className: "ff-os-tree__vertical-child" }, index))) }), _jsx("div", { className: "ff-os-tree__children", children: childrenLabels.map((label, index) => (_jsx("div", { className: "ff-os-tree__child-container", children: _jsx("div", { className: "ff-os-tree__child-label", children: label }) }, index))) })] }));
};
export default OsTree;
//# sourceMappingURL=OsTree.js.map