import React, { forwardRef } from "react";
import { Popover as PopoverPrimitive } from "radix-ui";
import { Button } from "../button";

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

const NAME = "PopoverTrigger";

export type PopoverTriggerProps = {
  /** Override CSS */
  css?: WPDS.CSS;
} & PopoverPrimitive.PopoverTriggerProps;

export const PopoverTrigger = forwardRef<
  HTMLButtonElement,
  PopoverTriggerProps
>(({ children, asChild, ...props }, ref) => {
  return (
    <PopoverPrimitive.Trigger {...props} asChild ref={ref}>
      {asChild ? children : <Button>{children}</Button>}
    </PopoverPrimitive.Trigger>
  );
});

PopoverTrigger.displayName = NAME;