import * as React from "react";
import { Dialog as DialogPrimitive } from "radix-ui";
import { styled } from "../theme";

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

const NAME = "DialogTrigger";

const StyledTrigger = styled(DialogPrimitive.Trigger, {});

export type DialogTriggerProps = {
  /** Any React node may be used as a child */
  children?: React.ReactNode;
  /** Override CSS */
  css?: WPDS.CSS;
} & React.ComponentPropsWithRef<typeof DialogPrimitive.Trigger>;

export const DialogTrigger = React.forwardRef<
  HTMLButtonElement,
  DialogTriggerProps
>(({ ...props }, ref) => <StyledTrigger {...props} ref={ref} />);

DialogTrigger.displayName = NAME;