import { useEffect, useState } from 'react'

export function useLocalStorageListener(
  key: string,
  callback: (value: string | null) => void
): string | null {
  const isWindowDefined = typeof window !== 'undefined'
  const [value, setValue] = useState<string | null>(
    isWindowDefined ? localStorage.getItem(key) : ''
  )

  useEffect(() => {
    const intervalId = setInterval(() => {
      const newValue = localStorage.getItem(key)
      if (newValue !== value) {
        setValue(newValue)
        if (newValue) {
          const parsed = JSON.parse(newValue)
          if (parsed) {
            callback(parsed)
          }
        }
      }
    }, 100)

    return () => {
      clearInterval(intervalId)
    }
  }, [key, value, callback])

  return value
}