import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { FONTS } from '../layout/colors';
import { useColorMode } from '../layout/use-color-mode';
const origWidth = 21;
const scale = 0.4;
export const Icon = () => {
    return (_jsx("svg", { style: {
            width: origWidth * scale,
        }, viewBox: "0 0 21 161", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 5C23 59.5 14.5 120.5 5.00005 156", stroke: "currentColor", strokeWidth: "8", strokeLinecap: "round" }) }));
};
export const ThemeNudge = () => {
    const { colorMode, setColorMode } = useColorMode();
    const toggleTheme = React.useCallback((e) => {
        e.preventDefault();
        setColorMode(colorMode === 'dark' ? 'light' : 'dark');
    }, [colorMode, setColorMode]);
    return (_jsx("div", { style: {
            flexDirection: 'row',
            display: 'flex',
            justifyContent: 'flex-start',
            paddingBottom: 5,
            textAlign: 'right',
            position: 'absolute',
            right: 0,
        }, children: _jsxs("div", { children: [_jsxs("div", { style: {
                        fontFamily: FONTS.GTPLANAR,
                        fontSize: 15,
                        width: 280,
                        paddingBottom: 8,
                        marginLeft: -15,
                        textWrap: 'balance',
                        marginTop: 5,
                    }, children: [_jsxs("a", { href: "#", onClick: toggleTheme, className: "bluelink", children: ["Switch to ", colorMode === 'dark' ? 'light' : 'dark', " mode"] }), ' ', "and see the video adjust!", ' '] }), _jsx(Icon, {})] }) }));
};
