import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useWizardContext } from "./wizard-context";
import type { WizardStepListProps } from "./wizard.props";

/** Step indicator bar. Renders the ordered list of step triggers. */
export function WizardStepList(props: WizardStepListProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useWizardContext();

  return (
    <div
      role="tablist"
      aria-orientation={ctx.orientation()}
      data-orientation={ctx.orientation()}
      {...rest}
    >
      {local.children}
    </div>
  );
}
