import type { ComponentProps } from 'react';
import { ScopedTheme as UniwindScopedTheme } from 'uniwind';

export type ScopedThemeProps = ComponentProps<typeof UniwindScopedTheme>;

/**
 * Forces a specific theme on a component subtree, regardless of the application's
 * global theme. Useful for marketing heroes, embedded widgets, or preview surfaces
 * that must render in a fixed mode.
 *
 * Wraps Uniwind's `ScopedTheme` to keep `uniwind` an internal implementation detail.
 *
 * Web requires `@custom-variant dark (&:where(.dark, .dark *));` in the consuming
 * app's `global.css`. See the Storybook story (`Theming/ScopedTheme`) for the full
 * mechanism, light-vs-dark asymmetry, and dynamic-switch caveat.
 */
export const ScopedTheme = (props: ScopedThemeProps) => <UniwindScopedTheme {...props} />;