import { PondSettings, fontStack } from '@dorfteich/shared';
import type { CSSProperties, ReactNode } from 'react';

/** The CSS custom properties a pond's font choice sets on its content root
 * (ADR 0016). The content CSS reads these; a family that fails to load falls
 * back to the category's system stack (`fontStack`). */
export function pondFontVariables(fonts: PondSettings['fonts']): CSSProperties {
  // Overrides the same custom properties the app-wide CSS already reads
  // (tokens.css), so headings, body, and code inside the scope re-resolve to
  // the pond's fonts without any per-element rules.
  return {
    '--font-heading': fontStack(fonts.heading.family),
    '--font-weight-heading': String(fonts.heading.weight),
    '--font-body': fontStack(fonts.body.family),
    '--font-weight-body': String(fonts.body.weight),
    '--font-mono': fontStack(fonts.mono.family),
    '--font-weight-mono': String(fonts.mono.weight),
  } as CSSProperties;
}

/**
 * Applies a pond's fonts to its content (ADR 0016): a wrapper that sets the
 * `--font-*` custom properties from `pond.settings.fonts`, so the editor and
 * read view render in the pond's chosen heading/body/mono families immediately.
 * A pond with no saved settings arrives with the defaulted values (Roboto 400 /
 * Roboto 200 / Fira Code), so the defaults always render.
 */
export function PondFontScope({
  fonts,
  children,
}: {
  fonts: PondSettings['fonts'];
  children: ReactNode;
}): React.JSX.Element {
  return (
    <div className="pond-font-scope" style={pondFontVariables(fonts)}>
      {children}
    </div>
  );
}