import { Group, Switch, useMantineTheme } from '@mantine/core';
import { IconSun, IconMoonStars } from '@tabler/icons-react';

import React, { ReactElement } from 'react';

function ToggleThemeButton({ colorScheme, toggleColorScheme }: any): ReactElement {
    const dark = colorScheme === 'dark';
    const theme = useMantineTheme();
    return (
        <Group
            justify="center"
            title={`Switch to ${dark ? 'light' : 'dark'} theme`}
        >
            <Switch
                data-test="theme-button"
                size="md"
                color={dark ? 'yellow' : 'blue'}
                checked={dark}
                onChange={(event) => {
                    event.stopPropagation();
                    toggleColorScheme();
                }}
                onLabel={<IconSun size={16} stroke={2.5} color={theme.colors.yellow[4]} />}
                offLabel={<IconMoonStars size={16} stroke={2.5} color={theme.colors.blue[6]} />}
            />
        </Group>

    );
}

export default ToggleThemeButton;