"use client";

import { Inter } from "next/font/google";

import type { ProviderProps } from "@/@types/types/provider-props.types";
import { getColorCssVariables } from "@/libs/color/color.lib";

import { useServerDataCtx } from "../server-data-provider/server-data-provider";

interface ThemeProviderProps extends ProviderProps {}

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});

const ThemeProvider = (props: ThemeProviderProps) => {
  const { clientConfig } = useServerDataCtx();
  const customClasses = getColorCssVariables(
    clientConfig?.properties.color ?? "#222",
    "primary",
  );
  const radiusCssVariables = `--primary-border-radius: ${
    clientConfig?.properties.borderRadius ?? "8px"
  };`;
  return (
    <>
      <style>{`
        :root {
          --font-family: ${inter};
          ${customClasses}
          ${radiusCssVariables}
          --font-multiplier-value: 0.0691666666666667;
          --font-unit: vmax;
        }
      `}</style>
      {props.children}
    </>
  );
};

export default ThemeProvider;