import React, {FC} from 'react';

import {ITab} from './tabs.type';

import {TabComponent as Tab} from './parts/tab/tab.component';
import {TabsProviderComponent as Provider} from './tabs-provider.component';
import {TabsContainerComponent as Container} from './parts/container/tabs-container.component';

export const Tabs: FC<ITab> = ({
    children,
    activeColor,
    variant,
    buttonVariant,
    value,
}) => {
    return (
        <Provider
            defaultButtonVariant={buttonVariant}
            defaultActiveColor={activeColor}
            defaultVariant={variant}
            defaultValue={value}
        >
            <Container>{children}</Container>
        </Provider>
    );
};

export const TabsComponent = Object.assign(Tabs, {Tab});