'use client'
import {ReactNode, useEffect} from 'react'
import {useClientStore, useLayoutStore} from '@/app/stores'

export type EffectProviderProps = {
  children?: ReactNode
}

export default function Effects(props: EffectProviderProps) {
  const setNavbar = useLayoutStore(state => state.setNavbar)
  const setBreakpoints = useClientStore(state => state.setBreakpoints)

  useEffect(() => {
    const sm = window.matchMedia(`(width >= 40rem)`)
    const md = window.matchMedia(`(width >= 48rem)`)
    const lg = window.matchMedia(`(width >= 64rem)`)
    const xl = window.matchMedia(`(width >= 80rem)`)

    setNavbar(md.matches)
    setBreakpoints({
      sm: sm.matches,
      md: md.matches,
      lg: lg.matches,
      xl: xl.matches,
    })

    sm.addEventListener('change', (e) => {
      setBreakpoints({sm: e.matches})
    })

    md.addEventListener('change', (e) => {
      setBreakpoints({md: e.matches})
    })

    lg.addEventListener('change', (e) => {
      setBreakpoints({lg: e.matches})
    })

    xl.addEventListener('change', (e) => {
      setBreakpoints({xl: e.matches})
    })
  }, [setBreakpoints, setNavbar])

  return props.children
}