import type { JSX } from "@solidjs/web";

import {
	DirectionContext,
	type TextDirection,
} from "./direction-provider-context.ts";

export interface DirectionProviderProps {
	children?: JSX.Element;
	/**
	 * The reading direction of the text.
	 * @default "ltr"
	 */
	direction?: TextDirection | undefined;
}

/**
 * Enables RTL behavior for Base UI components.
 *
 * Documentation: [Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider)
 */
export function DirectionProvider(props: DirectionProviderProps): JSX.Element {
	// Wrap as an accessor so consumers of `useDirection()` stay reactive when
	// the `direction` prop changes.
	const direction = (): TextDirection => props.direction ?? "ltr";

	return (
		<DirectionContext value={direction}>{props.children}</DirectionContext>
	);
}