import { MattrixwvTabGroup } from '$/component/tab';
import type { TabGroupContent } from '$/types/TabTypes';
import { createFileRoute } from '@tanstack/react-router';
import { BsXLg } from 'react-icons/bs';


export const Route = createFileRoute('/tab/')({
	component: RouteComponent
});


// eslint-disable-next-line react-refresh/only-export-components
function RouteComponent(){
	const tabs: TabGroupContent[] = [
		{ id: "1", tab: "Tab 1", content: "Tab 1 Content" },
		{ id: "2", tab: "Tab 2", content: "Tab 2 Content" },
		{ id: "3", tab: "Tab 3", content: "Tab 3 Content" },
		{ id: "4", tab: "Tab 4", content: "Tab 4 Content" },
		{ id: "5", tab: <div className="flex flex-row items-center justify-center gap-x-2">Tab <BsXLg/></div>, content: <div className="flex flex-row items-center justify-center gap-x-2">Tab <BsXLg/> Content</div> }
	];

	return (
		<MattrixwvTabGroup
			tabs={tabs}
		/>
	);
}