import { Tab, TabList, Text } from '@fluentui/react-components';
import { useState } from 'react';

export interface ITabsPane {
    title: string;
    value: string;
    view: JSX.Element;
}

export interface TabsPaneProps {
    defaultTab: string;
    tabs: ITabsPane[];
}

const TabsPane = ({
    defaultTab,
    tabs
}: TabsPaneProps) => {
    const [selectedTab, setSelectedTab] = useState<string | unknown>(defaultTab)

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '100%',
            maxHeight: '50%',
        }}>
            <div style={{
                display: 'flex',
                flexWrap: 'wrap',
                maxWidth: '100%',
                overflowX: 'auto',
                minHeight: 'min-content',
                borderBottom: '1px solid var(--colorNeutralShadowKey)'
            }}>
                <TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
                    {tabs.map((tab) => (
                        <Tab key={tab.value} value={tab.value}>
                            <Text size={200}>{tab.title}</Text>
                        </Tab>
                    ))}
                </TabList>
            </div>


            <div style={{
                display: 'flex',
                overflow: 'auto'
            }}>
                {tabs.find(tab => tab.value === selectedTab)?.view}
            </div>
        </div>
    )
}

export default TabsPane