"use client"

import { useEffect } from "react"
import { useThemeStore } from "@rahoot/web/stores/theme"

const ThemeHydrator = () => {
  const { setBackground, setBrandName } = useThemeStore()

  useEffect(() => {
    const load = async () => {
      try {
        const res = await fetch("/api/theme", { cache: "no-store" })
        const data = await res.json()
        if (res.ok && data.theme) {
          if (typeof data.theme.backgroundUrl === "string") {
            setBackground(data.theme.backgroundUrl || null)
          }
          if (typeof data.theme.brandName === "string") {
            setBrandName(data.theme.brandName)
          }
        }
      } catch (error) {
        console.error("Failed to hydrate theme", error)
      }
    }
    load()
  }, [setBackground, setBrandName])

  return null
}

export default ThemeHydrator