import React, { useState, ChangeEvent } from "react";
import { Tab, Tabs as MuiTabs, TabsProps as MuiTabsProps } from "@mui/material";
import './tab.scss';


export interface TabsProps extends MuiTabsProps { }


export const Tabs = ({ variant, textColor, indicatorColor, scrollButtons, ...rest }: MuiTabsProps) => {

    const [value, setValue] = useState<Number>(0);

    const handleChange = (event: ChangeEvent<{}>, newValue: number) => {
        setValue(newValue)
    };
    return (
        <div>
            <MuiTabs variant={variant} value={value} {...rest}
                onChange={handleChange} aria-label="Custom tabs"
                textColor={textColor}
                allowScrollButtonsMobile
                scrollButtons={scrollButtons}
                indicatorColor={indicatorColor}
            >
                <Tab className="Tab-container" label="Tab 1" />
                <Tab className="Tab-container" label="Tab 2" />
                <Tab className="Tab-container" label="Tab 3" />
            </MuiTabs>
            {value === 0 && <div>This is the content of Tab 1.</div>}
            {value === 1 && <div>This is the content of Tab 2.</div>}
            {value === 2 && <div>This is the content of Tab 3.</div>}
        </div>
    );
};