import React, { useContext } from 'react';
import VerticalTabsContext from '../VerticalTabs/VerticalTabsContext';
import { withFocusable } from '../common/Focusable';
import { SelectableItem } from './components/SelectableItem';
import { TitleItem } from './components/TitleItem';
import { ActionItem } from './components/ActionItem';
export const VerticalTabsItem = ({ id, type = 'tab', tabIndex, ...rest }) => {
    const { activeTabId, onChange, size, ellipsis, skin: baseSkin, } = useContext(VerticalTabsContext);
    const contextProps = {
        activeTabId,
        onChange,
        size,
        baseSkin,
        ellipsis,
    };
    const selected = id !== undefined && activeTabId !== undefined && id === activeTabId;
    if (type === 'action') {
        return React.createElement(ActionItem, { ...contextProps, ...rest });
    }
    if (type === 'title') {
        return React.createElement(TitleItem, { ...contextProps, ...rest });
    }
    return (React.createElement(SelectableItem, { id: id, tabIndex: tabIndex ?? (rest.disabled ? -1 : 0), selected: selected, ...contextProps, ...rest }));
};
VerticalTabsItem.displayName = 'VerticalTabsItem';
export default withFocusable(VerticalTabsItem);
//# sourceMappingURL=VerticalTabsItem.js.map