import React from "react";

import { styled } from "../theme";

import type * as WPDS from "../theme";

import { DropdownMenu as ActionMenuPrimitive } from "radix-ui";
import { Divider } from "../divider";

const NAME = "ActionMenuRadioGroup";

export const StyledRadioGroup = styled(ActionMenuPrimitive.RadioGroup, {});

export type ActionMenuRadioGroupProps = {
  /** Any React node may be used as a child to allow for formatting */
  children?: React.ReactNode;
  /** Override CSS */
  css?: WPDS.CSS;
} & ActionMenuPrimitive.DropdownMenuRadioGroupProps;

export const ActionMenuRadioGroup = React.forwardRef<
  HTMLDivElement,
  ActionMenuRadioGroupProps
>(({ children, ...props }: ActionMenuRadioGroupProps, ref) => {
  return (
    <StyledRadioGroup {...props} ref={ref}>
      {children}
      <Divider />
    </StyledRadioGroup>
  );
});

ActionMenuRadioGroup.displayName = NAME;