const {systemTheme, theme, setTheme} = useTheme();
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
      setMounted(true)
  }, [])

  const renderThemeChanger = () => {
      const currentTheme = theme === 'system' ? 'dark' : theme
      if (!mounted) return null;

      if (currentTheme === 'dark') {
          return (
              <div className='flex cursor-pointer items-center'>
                  <h2 className='text-md font-mono font-semibold uppercase tracking-tighter dark:text-gray-50'>
                    <SunIcon
                        className='ml-1 inline-block h-8 w-8 text-gray-400 '
                        onClick={() => setTheme('light')}
                    />
                  </h2>
              </div>
          )
      } else {
        return (
            <div className='flex cursor-pointer items-center'>
                <h2 className='text-md font-mono font-semibold uppercase tracking-tighter text-slate-500'>
                  <MoonIcon
                      className='ml-1 inline-block h-8 w-8 text-gray-600 animate-wiggle-reverse'
                      onClick={() => setTheme('dark')}
                  />
                </h2>
            </div>
        )
      }
  }