'use client'

import React from 'react';

import style from './Theme.module.scss';

import { TbMoon, TbSun } from 'react-icons/tb';
import { useAppDispatch, useAppSelector } from '@/store/store';
import { Themes } from '@/meta/settings';
import { setCurrentTheme } from '@/store/settingsSlice';

const Menu: React.FC = () => {

    const theme = useAppSelector((state) => state.settings.theme);
    const dispatch = useAppDispatch();

    return (
        <div onClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))} className={style.container}>
            {theme == Themes.dark && <TbMoon size={24} />}
            {theme == Themes.light && <TbSun size={24} />}
        </div>
    );
};

export default Menu;