import React, { forwardRef } from "react";
import { styled, theme } from "../theme";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import type * as WPDS from "../theme";

const StyledTrigger = styled(TooltipPrimitive.Trigger, {
  color: theme.colors.primary,
});

type TooltipTriggerVariants = WPDS.VariantProps<typeof StyledTrigger>;
type TriggerCombinedProps = TooltipPrimitive.TooltipTriggerProps &
  TooltipTriggerVariants;

export interface TooltipTriggerInterface extends TriggerCombinedProps {
  /** Override CSS */
  css?: WPDS.CSS;
}

export const TooltipTrigger = forwardRef<
  HTMLButtonElement,
  TooltipTriggerInterface
>((props: TooltipTriggerInterface, ref) => (
  <StyledTrigger {...props} ref={ref} asChild>
    {props.children}
  </StyledTrigger>
));

TooltipTrigger.displayName = "TooltipTrigger";