import React from "react";
import { TooltipContent } from "./TooltipContent";
import { TooltipTrigger } from "./TooltipTrigger";
import { Tooltip as TooltipPrimitive } from "radix-ui";

export const TooltipRoot = ({
  children,
  ...props
}: TooltipPrimitive.TooltipProps) => (
  <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>
);

TooltipRoot.displayName = "TooltipRoot";

export const TooltipPortal = (props: TooltipPrimitive.TooltipPortalProps) => (
  <TooltipPrimitive.Portal {...props}>{props.children}</TooltipPrimitive.Portal>
);

TooltipPortal.displayName = "TooltipPortal";

export const TooltipProvider = (
  props: TooltipPrimitive.TooltipProviderProps
) => (
  <TooltipPrimitive.Provider {...props}>
    {props.children}
  </TooltipPrimitive.Provider>
);

TooltipProvider.displayName = "TooltipProvider";

const Provider = TooltipProvider;
const Root = TooltipRoot;
const Portal = TooltipPortal;
const Trigger = TooltipTrigger;
const Content = TooltipContent;

type TooltipProps = {
  Root: typeof Root;
  Portal: typeof Portal;
  Provider: typeof Provider;
  Content: typeof Content;
  Trigger: typeof Trigger;
};

/**
 * Tooltip
 */
export const Tooltip: TooltipProps = {
  Provider,
  Root,
  Content,
  Trigger,
  Portal,
};