import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Box, Group, Tabs } from "@mantine/core";
import { ProductsTable, UsersTable, UsersDemoTable, PropsTable } from "./index";
import { Analytics, EventAction, EventCategory } from "../../utils";
export var TableRoot = function () {
    var _a = useState("Products"), activeTab = _a[0], setActiveTab = _a[1];
    var handleTabChange = function (value) {
        setActiveTab(value);
        Analytics.trackEvent({
            category: EventCategory.Table,
            action: EventAction.Navigate,
            label: "Table Viewed -> ".concat(value),
        });
    };
    return (_jsx(Box, { mx: 24, sx: { boxSizing: "border-box", textAlign: "left" }, children: _jsxs(Tabs, { variant: "pills", value: activeTab, onTabChange: handleTabChange, children: [_jsxs(Group, { sx: {
                        justifyContent: "center",
                        padding: 10,
                        borderBottom: "1px solid",
                    }, children: [_jsx(Tabs.Tab, { value: "Products", children: "Products Table" }), _jsx(Tabs.Tab, { value: "Users", children: "Users Table" }), _jsx(Tabs.Tab, { value: "UsersDemo", children: "Custom Actions Demo Table" }), _jsx(Tabs.Tab, { value: "TableProps", children: "Table Props" })] }), _jsx(Group, { children: _jsxs(Tabs.List, { w: "100%", children: [_jsx(Tabs.Panel, { value: "Products", w: "100%", children: _jsx(ProductsTable, {}) }), _jsx(Tabs.Panel, { value: "Users", w: "100%", children: _jsx(UsersTable, {}) }), _jsx(Tabs.Panel, { value: "UsersDemo", w: "100%", children: _jsx(UsersDemoTable, {}) }), _jsx(Tabs.Panel, { value: "TableProps", w: "100%", children: _jsx(PropsTable, {}) })] }) })] }) }));
};
