import * as React from 'react';
import { TabView, Tab } from './TabView';

export default {
    title: 'Atoms/Tab View',
    argTypes: {
        tabCount: { control: 'range', min: 1, max: 100 },
    },
    args: {
        tabCount: 10,
    },
};

export const ManyTabs = ({ tabCount }) => {
    const tabs = [...'0'.repeat(tabCount)].map((_, i) => (
        <Tab title={`tab ${i}`}>
            {() => (
                <>
                    <h1>tab {i}</h1>
                    <p>hello!!!!!</p>
                </>
            )}
        </Tab>
    ));

    return <TabView>{tabs}</TabView>;
};
