import { jsxs, jsx } from 'react/jsx-runtime';

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 { OsTree as default };
//# sourceMappingURL=OsTree.js.map
