"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"
import { useEffect } from "react"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  // Force theme update on client side
  useEffect(() => {
    // This runs only on client side
    const savedTheme = localStorage.getItem("theme") || "light"

    // Set initial theme
    document.documentElement.classList.remove("light", "dark")
    document.documentElement.classList.add(savedTheme)
    document.documentElement.style.colorScheme = savedTheme

    console.log("Initial theme set to:", savedTheme)
  }, [])

  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="light"
      enableSystem={false}
      disableTransitionOnChange={true}
      {...props}
    >
      {children}
    </NextThemesProvider>
  )
}