import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { DropdownMenuRadioGroupContextProvider } from "./dropdown-menu-context";

export interface DropdownMenuRadioGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
  /** Currently selected radio value. */
  value: string;
  /** Called when the selected value changes. */
  onValueChange?: ((value: string) => void) | undefined;
  children?: JSX.Element;
}

/** Groups radio items within a DropdownMenu, managing single-select state. */
export function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): JSX.Element {
  const [local, rest] = splitProps(props, ["value", "onValueChange", "children"]);

  return (
    <DropdownMenuRadioGroupContextProvider
      value={{
        value: () => local.value,
        onValueChange: local.onValueChange,
      }}
    >
      <div role="group" {...rest}>
        {local.children}
      </div>
    </DropdownMenuRadioGroupContextProvider>
  );
}
