"use client";

import * as React from "react";
import type { Content } from "@/src/content/types";
import type { Locale } from "@/src/domain/locale";

type Value = { readonly locale: Locale; readonly content: Content };

const ContentContext = React.createContext<Value | null>(null);

/**
 * ContentProvider: hands the language of the page and its texts to the client
 * components. The layout picks both; only the texts of that one language are
 * sent to the browser.
 */
export const ContentProvider: React.FC<
  Value & { children: React.ReactNode }
> = ({ locale, content, children }) => {
  const value = React.useMemo(() => ({ locale, content }), [locale, content]);
  return (
    <ContentContext.Provider value={value}>{children}</ContentContext.Provider>
  );
};

const useValue = (): Value => {
  const value = React.useContext(ContentContext);
  if (value === null) {
    throw new Error("useContent and useLocale need a ContentProvider above.");
  }
  return value;
};

export const useContent = (): Content => useValue().content;
export const useLocale = (): Locale => useValue().locale;