"use client";

import * as TooltipPrimitive from "@radix-ui/react-tooltip";

import { cn } from "@/lib/utils";

export const TooltipProvider = TooltipPrimitive.Provider;

export const Tooltip = TooltipPrimitive.Root;

export const TooltipTrigger = TooltipPrimitive.Trigger;

export function TooltipContent({

  className,

  sideOffset = 6,

  children,

  ...props

}: React.ComponentProps<typeof TooltipPrimitive.Content>) {

  return (

    <TooltipPrimitive.Portal>

      <TooltipPrimitive.Content

        sideOffset={sideOffset}

        className={cn(

          "z-[var(--z-tooltip)] overflow-hidden rounded-[var(--radius-sm)] border border-[var(--color-border-default)]",

          "bg-[var(--color-bg-overlay)] px-2.5 py-1.5 text-xs text-[var(--color-fg-secondary)] shadow-[var(--shadow-pop)]",

          "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0",

          className,

        )}

        {...props}

      >

        {children}

      </TooltipPrimitive.Content>

    </TooltipPrimitive.Portal>

  );

}