import React from 'react';
import { makeStyles } from '@material-ui/core';
import { FluentSimpleTab } from '../../navigation/tabs/defaultTabs/FluentSimpleTab';
import { FluentSimpleTabs } from '../../navigation/tabs/defaultTabs/FluentSimpleTabs';
import { StandardTitle } from '../../dataDisplay/typography/StandardTitle';
function a11yProps(index) {
    return {
        id: `simple-tab-${index}`,
        'aria-controls': `simple-tabpanel-${index}`
    };
}
const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        marginTop: 12
    },
    title: {
        margin: theme.spacing(2)
    },
    titleWrapper: {
        paddingLeft: theme.spacing(2)
    }
}));
export const UtilityTabHeader = ({ handleChange, value, tabList, title = 'Page title' }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.titleWrapper }, React.createElement(StandardTitle, null, title)), React.createElement(FluentSimpleTabs, { value: value, onChange: handleChange }, tabList &&
        tabList.map((item, index) => {
            return (React.createElement(FluentSimpleTab, Object.assign({ key: item.label, label: item.label }, a11yProps(index))));
        }))));
};
//# sourceMappingURL=UtilityTabHeader.js.map