import { type ReactNode, useEffect } from "react"
import { useClientStore } from "@/components/stores/client"
import { useLayoutStore } from "@/components/stores/layout"

export default function Effects(props: { children?: ReactNode }) {
  const md = useClientStore(state => state.breakpoint.md)
  const setNavbar = useLayoutStore(state => state.setNavbar)

  useEffect(() => {
    // 断点变化时同步侧边栏默认状态：桌面端展开、移动端收起
    setNavbar(md)
  }, [md, setNavbar])

  useEffect(() => {
    const html = document.documentElement
    const originalFontSize = html.style.fontSize
    html.style.fontSize = "16px"
    return () => {
      html.style.fontSize = originalFontSize
    }
  }, [])

  return <>{props.children}</>
}