import React, {FC} from 'react';

import {FreeMode} from 'swiper';
import {useTabs} from '../../hooks';
import {ITabsContainer} from '../../tabs.type';
import {TabsContainerStyle as S} from './tabs-container.style';

import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import {SwiperSlide} from 'swiper/react';

export const TabsContainerComponent: FC<ITabsContainer> = ({children}) => {
    const tabsStore = useTabs();

    if (tabsStore?.variant === 'fullWidth')
        return <S.FullWidth>{children}</S.FullWidth>;

    if (tabsStore?.variant === 'standard')
        return <S.FullWidth>{children}</S.FullWidth>;

    return (
        <S.Scrollable
            freeMode
            pagination
            slidesPerView={'auto'}
            modules={[FreeMode]}
        >
            <SwiperSlide>{children}</SwiperSlide>
        </S.Scrollable>
    );
};