import React from "react";
import * as TooltipPrimitive from "@rn-primitives/tooltip";
import { cn } from "../utils/cn";
import { Text } from "./text";

const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { className?: string }
>(({ className, sideOffset = 6, children, ...props }, ref) => (
  <TooltipPrimitive.Portal>
    <TooltipPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn("z-50 rounded-md px-3 py-1.5", "bg-foreground dark:bg-white", className)}
      {...props}
    >
      {typeof children === "string" ? (
        <Text className="text-xs text-background dark:text-black">{children}</Text>
      ) : (
        children
      )}
    </TooltipPrimitive.Content>
  </TooltipPrimitive.Portal>
));
TooltipContent.displayName = "TooltipContent";

export { Tooltip, TooltipTrigger, TooltipContent };