import React, { forwardRef } from "react";
import { cx } from "../../utils";
import { base as sizeCSS } from "./variations/_size/base";
import { base as viewCSS } from "./variations/_view/base";
import { base, Separator } from "./Breadcrumbs.styles";
import { addSeparator, convertIconSize } from "./utils";
import { getRenderItems } from "./utils/getShortItems";
export const breadcrumbsRoot = (Root)=>/*#__PURE__*/ forwardRef(({ view, size, separator, items, showItems = items.length, className }, outerRootRef)=>{
        const renderSeparator = separator ?? /*#__PURE__*/ React.createElement(Separator, {
            color: "inherit",
            size: convertIconSize(size)
        });
        const renderItems = getRenderItems(items, renderSeparator, showItems);
        const itemsWithSeparator = addSeparator(renderItems, renderSeparator);
        return /*#__PURE__*/ React.createElement(Root, {
            ref: outerRootRef,
            size: size,
            view: view,
            className: cx(className),
            items: items
        }, itemsWithSeparator.map((item, index)=>/*#__PURE__*/ React.createElement(React.Fragment, {
                key: index
            }, item)));
    });
export const breadcrumbsConfig = {
    name: 'Breadcrumbs',
    tag: 'div',
    layout: breadcrumbsRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
