import PropTypes from 'prop-types'
import WbSunnyIcon from '@material-ui/icons/WbSunny'
import Brightness3Icon from '@material-ui/icons/Brightness3'

export default function SwitchTheme({darkMode, setDarkMode}) {
  const handleClick = () => {
    localStorage.setItem('oki-dark', !darkMode)
    setDarkMode(!darkMode)
  }

  return (
    <div>
      {darkMode ? (
        <WbSunnyIcon onClick={handleClick} />
      ) : (
        <Brightness3Icon onClick={handleClick} />
      )}
    </div>
  )
}

SwitchTheme.propTypes = {
  darkMode: PropTypes.bool.isRequired,
  setDarkMode: PropTypes.func.isRequired
}