import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import type { MeterRootState } from "../root/meter-root.tsx";

export interface MeterTrackState extends MeterRootState {}

export interface MeterTrackProps
	extends BaseUIComponentProps<"div", MeterTrackState> {
	/** Tag/component to render. Defaults to `"div"`. */
	as?: ValidComponent;
}

/**
 * Contains the meter indicator. Renders a `<div>` (or `as` override).
 *
 * §1 wave 2: replaces `renderElement` with a `dynamic()` element. Meter has no
 * derived state (root state is `Record<never, never>`), so this part is
 * a pure forwarder of consumer props.
 */
export function MeterTrack(props: MeterTrackProps): JSX.Element {
	const userClassStyle = resolveClassStyle(props, () => ({}));
	const userProps = omit(props, "as", "class", "style", "attrs");
	const merged = mergeRootProps(userClassStyle, userProps);
	const Tag = dynamic(() => props.as ?? "div");
	return <Tag {...merged} />;
}