import React from "react";

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

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

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

const NAME = "ActionMenuTrigger";

export const StyledTrigger = styled(ActionMenuPrimitive.Trigger, {
  appearance: "none",
  background: "transparent",
  border: "none",
  color: theme.colors.primary,
  cursor: "pointer",
  display: "inline-flex",
  alignItems: "center",
  gap: theme.space["025"],
  fontFamily: theme.fonts.meta,
  fontSize: theme.fontSizes["100"],
  lineHeight: theme.lineHeights.meta,
  margin: "auto",
});

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

export const ActionMenuTrigger = React.forwardRef<
  HTMLButtonElement,
  ActionMenuTriggerProps
>((props: ActionMenuTriggerProps, ref) => {
  return <StyledTrigger {...props} ref={ref} />;
});

ActionMenuTrigger.displayName = NAME;