import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from "react";
import { Switch, Group, useMantineColorScheme, useMantineTheme, rem, } from "@mantine/core";
import { IconMoonStars, IconSun } from "@tabler/icons-react";
import { Analytics, EventAction, EventCategory } from "../../../../../utils";
export var ThemeToggle = function () {
    var _a = useMantineColorScheme(), colorScheme = _a.colorScheme, toggleColorScheme = _a.toggleColorScheme;
    var theme = useMantineTheme();
    var handleThemeChange = useCallback(function () {
        Analytics.trackEvent({
            category: EventCategory.Home,
            action: EventAction.ThemeToggle,
        });
        toggleColorScheme();
    }, [toggleColorScheme]);
    return (_jsx(Group, { m: 15, mr: 40, children: _jsx(Switch, { title: "Toggle color theme", "aria-label": "Toggle color theme", checked: colorScheme === "dark", onChange: handleThemeChange, size: "lg", onLabel: _jsx(IconSun, { color: theme.white, size: rem(18) }), offLabel: _jsx(IconMoonStars, { color: theme.colors.gray[6], size: rem(18) }), sx: {
                "& .mantine-Switch-track": {
                    cursor: "pointer",
                },
            } }) }));
};
