import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useSliderContext } from "./slider-context";

/** Props for Slider.Track. */
export interface SliderTrackProps extends JSX.HTMLAttributes<HTMLDivElement> {
  children?: JSX.Element;
}

/** The track element that contains Range and Thumb. */
export function SliderTrack(props: SliderTrackProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useSliderContext();
  return (
    <div data-orientation={ctx.orientation()} data-disabled={ctx.disabled() || undefined} {...rest}>
      {local.children}
    </div>
  );
}
