'use client'

import React from 'react';

import { TbMoon, TbSun } from 'react-icons/tb';
import { Cookies, DEFAULT_THEME, Themes } from '@/meta/settings';

import Icon from '../Icon';
import { setCookie } from '@/utils/cookies/write';
import { useCookies } from 'react-cookie';

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

    const [cookies] = useCookies([Cookies.theme]);

    const theme = cookies.theme ?? DEFAULT_THEME

    const handleClick = async () => {
        const newTheme = theme == Themes.dark ? Themes.light : Themes.dark
        await setCookie(Cookies.theme, newTheme)
    }

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

export default Theme;