import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import { useWizardStepContext } from "./wizard-context";
import type { WizardStepContentProps } from "./wizard.props";

/** Step content panel. Only rendered when its step is active. */
export function WizardStepContent(props: WizardStepContentProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const step = useWizardStepContext();

  return (
    <Show when={step.isActive()}>
      <div
        role="tabpanel"
        id={step.contentId}
        aria-labelledby={step.triggerId}
        data-state="active"
        // biome-ignore lint/a11y/noNoninteractiveTabindex: tabpanel requires tabIndex per WAI-ARIA spec
        tabIndex={0}
        {...rest}
      >
        {local.children}
      </div>
    </Show>
  );
}
