/**
 * @factory/ui — Tooltip (Radix `@radix-ui/react-tooltip` wrapper).
 * Radix handles show delay, positioning and hiding on focus-out/Escape.
 */
import * as React from "react";
import * as RadixTooltip from "@radix-ui/react-tooltip";
import { clsx } from "clsx";

export const TooltipProvider = RadixTooltip.Provider;
export const Tooltip = RadixTooltip.Root;
export const TooltipTrigger = RadixTooltip.Trigger;

export const TooltipContent = React.forwardRef<
  React.ElementRef<typeof RadixTooltip.Content>,
  React.ComponentPropsWithoutRef<typeof RadixTooltip.Content>
>(({ className, sideOffset = 6, ...props }, ref) => (
  <RadixTooltip.Portal>
    <RadixTooltip.Content
      ref={ref}
      sideOffset={sideOffset}
      className={clsx(
        "z-50 max-w-xs px-2.5 py-1.5 text-xs font-medium",
        "rounded-md bg-primary text-primary-foreground shadow-sm",
        className,
      )}
      {...props}
    />
  </RadixTooltip.Portal>
));
TooltipContent.displayName = "TooltipContent";