import React__default from 'react';
import ChevronRight from '../../../icons/ChevronRight.js';
import { BottomSheet } from '../../BottomSheet/index.js';
import { Button } from '../../Button/index.js';
import { TabList, ExpandedTabItem, ExpandedItemText, ExpandedLabel, ExpandedSecondary, DismissWrapper } from '../styles.js';

function OpenTabs({ showBottomSheet, tabs, selectedTab, dismissText, toggleBottomSheet, onExpandItemClick, }) {
    return (React__default.createElement(BottomSheet, { isOpened: showBottomSheet, onClose: toggleBottomSheet, headerContentModifiers: "empty", headerControlsModifiers: "close", height: "100%" },
        React__default.createElement(TabList, null, tabs.map((tab) => (React__default.createElement(ExpandedTabItem, { key: `expanded-${tab.value}`, onClick: () => onExpandItemClick(tab) },
            React__default.createElement(ExpandedItemText, null,
                React__default.createElement(ExpandedLabel, { selected: tab.value === selectedTab.value }, tab.label),
                tab.secondaryText && (React__default.createElement(ExpandedSecondary, null, tab.secondaryText))),
            React__default.createElement(ChevronRight, null))))),
        React__default.createElement(DismissWrapper, null,
            React__default.createElement(Button, { variant: "secondary", size: "medium", fullWidth: true, onClick: toggleBottomSheet }, dismissText))));
}

export { OpenTabs };
