import type { ReactNode } from "react";
import {
  useCurrentColorMode,
  useCurrentScopedTheme,
} from "../../core/ThemeContext";
import { ScopedTheme } from "./ScopedTheme";

export interface DefaultAccentScopeProps {
  children?: ReactNode;
}

/**
 * Falls back to the brand accent when the subtree sits in a plain light/dark
 * theme, so an accent-driven element (a radio dot, a selected card) is tinted
 * instead of grayscale. An accent already applied by an ancestor wins.
 */
export function DefaultAccentScope({
  children,
}: DefaultAccentScopeProps): ReactNode {
  const currentTheme = useCurrentScopedTheme();
  const currentColorMode = useCurrentColorMode();
  return (
    <ScopedTheme
      theme={
        currentTheme === currentColorMode
          ? `${currentTheme}_brand`
          : currentTheme
      }
    >
      {children}
    </ScopedTheme>
  );
}