import { useAuth } from "@/contexts/auth-context";
import { useMantineTheme } from "@mantine/core";
import { useMantineColorScheme } from "@mantine/core";
import { useEffect } from "react";

const ColorSchemeProvider = ({ children }: { children: React.ReactNode }) => {
  const {
    metadata: { colorScheme },
  } = useAuth();
  const { setColorScheme } = useMantineColorScheme();
  const theme = useMantineTheme();

  useEffect(() => {
    if (!colorScheme) return;

    setColorScheme(colorScheme);
    const themeColorMeta = document.querySelector('meta[name="theme-color"]');
    if (themeColorMeta) {
      themeColorMeta.setAttribute(
        "content",
        colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0]
      );
    }
  }, [colorScheme]);
  return children;
};

export default ColorSchemeProvider;
