import React, {FC} from 'react';

import {ITab} from './tab.type';
import {useTabs} from '../../hooks';
import {TabStyle as S} from './tab.style';

export const TabComponent: FC<ITab> = ({value, ...props}) => {
    const tabs = useTabs();
    const tabsVariant = tabs?.variant;
    const variant = tabs?.buttonVariant;
    const color = tabs?.activeColor;
    const activeValue = tabs?.value;

    const activeDetection = activeValue === value ? variant : 'text';
    const isFull = tabsVariant === 'fullWidth';

    return (
        <S.Button
            full={isFull}
            color={color}
            variant={activeDetection}
            {...props}
        />
    );
};