import { useRef, useState } from 'react';
import { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
export const TabsMock = ({ type }) => {
    const [panelShown, changePanel] = useState('1.1');
    const tabsRef = useRef(null);
    const handleTabChange = (id) => {
        changePanel(id);
    };
    const tabs = [
        { name: 'Tab 1.1', id: '1.1', count: 5 },
        { name: 'Tab 1.2', id: '1.2', count: 14 },
        { name: 'Tab 1.3', id: '1.3', count: 0 },
        { name: 'Tab 1.4', id: '1.4', count: 56, disabled: true },
        { name: 'Tab 1.5', id: '1.5', count: 150, errors: 2 }
    ];
    return (<Flex container={{ direction: type === 'horizontal' ? 'column' : 'row' }}>
      <Flex item={{ grow: 1 }}>
        <Tabs tabs={tabs} type={type} onTabClick={handleTabChange} currentTabId={panelShown} ref={tabsRef}/>
      </Flex>
      {tabs.map(({ id, name }) => (<TabPanel tabId={id} currentTabId={panelShown} title={type === 'horizontal' ? name : undefined} key={id} tablistRef={tabsRef} tablistType={type}>
          <Flex container={{
                ...(type === 'vertical' && { pad: [1, 2] })
            }}>
            {name} content
          </Flex>
        </TabPanel>))}
    </Flex>);
};
//# sourceMappingURL=Tabs.mocks.jsx.map