import { FluentSimpleTab } from "./FluentSimpleTab.mjs";
import { FluentSimpleTabs } from "./FluentSimpleTabs.mjs";
import { FluentTabPanel } from "./FluentTabPanel.mjs";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import clsx from "clsx";
//#region src/UI/navigation/tabs/defaultTabs/FluentTabUtility.jsx
function a11yProps(index) {
	return {
		id: `simple-tab-${index}`,
		"aria-controls": `simple-tabpanel-${index}`
	};
}
const useStyles = makeStyles((theme) => ({ root: {
	flexGrow: 1,
	backgroundColor: theme.palette.background.paper
} }));
const FluentTabUtility = (props, ...otherProps) => {
	const classes = useStyles();
	const { TabList, block, className, variant, color, FluentSimpleTabsProps } = props;
	const [value, setValue] = useState(0);
	const handleChange = (event, newValue) => {
		setValue(newValue);
	};
	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
		value,
		block,
		onChange: handleChange,
		...FluentSimpleTabsProps,
		...otherProps
	}, TabList.map((item, index) => {
		return /* @__PURE__ */ React.createElement(FluentSimpleTab, {
			...otherProps,
			key: index,
			label: item.label,
			icon: item.icon,
			block,
			badgeContent: item.badgeContent,
			variant,
			color,
			...a11yProps(index)
		});
	})), TabList.map((item, index) => {
		return /* @__PURE__ */ React.createElement(FluentTabPanel, {
			block,
			value,
			index,
			key: index
		}, item.child);
	}));
};
//#endregion
export { FluentTabUtility };

//# sourceMappingURL=FluentTabUtility.mjs.map