import type { MattrixwvTabGroupProps } from "$/types/TabTypes";
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({
	tabs,
	className
}: Readonly<MattrixwvTabGroupProps>){
	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>
	);
}
