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

import type { Orientation } from "../internals/types";
import { Separator, type SeparatorProps } from "../separator/index.ts";
import { useToolbarRootContext } from "./toolbar-root-context.ts";

export interface ToolbarSeparatorProps
	extends Omit<SeparatorProps, "orientation"> {
	/**
	 * Override the separator's orientation. Defaults to the orthogonal of the
	 * toolbar's orientation (matches React Base UI — a horizontal toolbar uses
	 * vertical separators and vice-versa).
	 */
	orientation?: Orientation | undefined;
}

/**
 * A separator rendered inside a `<Toolbar.Root>`. Wraps the shared
 * `<Separator>` primitive and flips orientation so the visual divider sits
 * perpendicular to the toolbar's main axis.
 */
export function ToolbarSeparator(props: ToolbarSeparatorProps): JSX.Element {
	// Optional context read — a standalone `<Toolbar.Separator>` outside a
	// `<Toolbar.Root>` should still render (matches React's implicit
	// tolerance: it consumes the root context but only to read orientation).
	const toolbar = useToolbarRootContext(true);

	const orientation = (): Orientation => {
		if (props.orientation !== undefined) return props.orientation;
		const toolbarOrientation = toolbar.orientation();
		return toolbarOrientation === "horizontal" ? "vertical" : "horizontal";
	};

	return <Separator {...props} orientation={orientation()} />;
}