import React from "react";

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

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

import { DropdownMenu as ActionMenuPrimitive } from "radix-ui";

import { ActionMenuContext } from "./context";

const NAME = "ActionMenuSub";

export const StyledSub = styled(ActionMenuPrimitive.Sub, {});

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

export const ActionMenuSub = ({ ...props }: ActionMenuSubProps) => {
  const context = React.useContext(ActionMenuContext);

  return (
    <ActionMenuContext.Provider
      value={{
        ...context,
      }}
    >
      <StyledSub {...props} />
    </ActionMenuContext.Provider>
  );
};

ActionMenuSub.displayName = NAME;