import React, { ReactElement, useEffect, useState } from 'react'
import { Helmet } from 'react-helmet'
import * as styles from './ThemeSwitch.module.css'
import Icon from '../atoms/Icon'
import useDarkMode from '../../hooks/useDarkMode'
const ThemeToggleInput = ({
isDark,
toggleDark
}: {
isDark: boolean
toggleDark: () => void
}) => (
toggleDark()}
type="checkbox"
name="toggle"
value="toggle"
aria-describedby="toggle"
checked={isDark}
/>
)
const HeadMarkup = ({
bodyClass,
themeColor
}: {
bodyClass: string
themeColor: string
}) => (
)
export default function ThemeSwitch(): ReactElement {
const { value, toggle } = useDarkMode()
const [themeColor, setThemeColor] = useState()
const [bodyClass, setBodyClass] = useState()
useEffect(() => {
setBodyClass(value ? 'dark' : null)
setThemeColor(value ? '#1d2224' : '#e7eef4')
}, [value])
return (
<>
)
}