import { ScrollAreaAutosize, Tabs } from '@mantine/core';

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

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

const TabsPane = ({
    defaultTab,
    tabs
}: TabsPaneProps) => {
    return (
        <Tabs defaultValue={defaultTab} mah='50%' h={'100%'} style={{
            display: 'grid',
            gridTemplateRows: 'min-content auto'
        }}>
            <ScrollAreaAutosize>
                <Tabs.List>
                    {tabs.map((tab) => (
                        <Tabs.Tab key={tab.value} value={tab.value}>
                            {tab.title}
                        </Tabs.Tab>
                    ))}
                </Tabs.List>
            </ScrollAreaAutosize>


            <ScrollAreaAutosize h='100%' offsetScrollbars p='xs'>
                {tabs.map(tab => (
                    <Tabs.Panel key={tab.value} value={tab.value}>
                        {tab.view}
                    </Tabs.Panel>
                ))}
            </ScrollAreaAutosize>
        </Tabs>
    )
}

export default TabsPane