'use client'

import React from 'react';

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

import Icon from '../Icon';

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

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

    return (
        <Icon handleClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))}>
            {theme == Themes.dark && <TbMoon size={24} />}
            {theme == Themes.light && <TbSun size={24} />}
        </Icon>
    );
};

export default Menu;