import type { MattrixwvTabGroupProps } from "$/types/Tab";
import { TabGroup } from "@headlessui/react";
import clsx from "clsx";
import MattrixwvTab from "./MattrixwvTab";
import MattrixwvTabList from "./MattrixwvTabList";
import MattrixwvTabPanel from "./MattrixwvTabPanel";
import MattrixwvTabPanels from "./MattrixwvTabPanels";


export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
	const {
		tabs,
		className
	} = props;


	return (
		<TabGroup
			className={clsx(
				"flex flex-col items-center justify-center w-full h-full overflow-hidden",
				className
			)}
		>
			<MattrixwvTabList>
				{
					tabs.map((tab, index) => (
						<MattrixwvTab
							key={index}
						>
							{tab.tab}
						</MattrixwvTab>
					))
				}
			</MattrixwvTabList>
			<MattrixwvTabPanels>
				{
					tabs.map((tab, index) => (
						<MattrixwvTabPanel
							key={index}
						>
							{tab.content}
						</MattrixwvTabPanel>
					))
				}
			</MattrixwvTabPanels>
		</TabGroup>
	);
}