import React, { useEffect, useState } from 'react'
import MoonIcon from '@geist-ui/icons/moon'
import SunIcon from '@geist-ui/icons/sun'
// import { useAllThemes, useTheme } from '@geist-ui/core'
import styles from './header.module.css'
import { Select } from '@geist-ui/core'
import { useTheme } from 'next-themes'

const Controls = () => {
    const [mounted, setMounted] = useState(false)
    const { theme, setTheme } = useTheme()
    useEffect(() => setMounted(true), [])
    if (!mounted) return null
    const switchThemes = () => {
        if (theme === 'dark') {
            setTheme('light')
        } else {
            setTheme('dark')
        }
    }

    return (
        <div className={styles.wrapper}>
            <Select
                scale={0.5}
                h="28px"
                pure
                onChange={switchThemes}
                value={theme}
            >
                <Select.Option value="light">
                    <span className={styles.selectContent}>
                        <SunIcon size={14} /> Light
                    </span>
                </Select.Option>
                <Select.Option value="dark">
                    <span className={styles.selectContent}>
                        <MoonIcon size={14} /> Dark
                    </span>
                </Select.Option>
            </Select>
        </div >
    )
}

export default React.memo(Controls);