/**
 * [INPUT]: (TooltipProps)
 * [OUTPUT]: (JSX.Element) - 提示框（基于 Radix Tooltip）
 * [POS]: qoder/tooltip - 注册表模板，复制到用户项目后可自由修改
 *
 * [PROTOCOL]:
 * - 用户可自由修改此文件
 * - 更新时使用 npx @design-llm/qoder-cli diff tooltip 查看差异
 */
import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
import { cn } from '@/lib/utils'

const TooltipProvider = TooltipPrimitive.Provider

const TooltipRoot = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 8, ...props }, ref) => (
  <TooltipPrimitive.Portal>
    <TooltipPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        'z-50 max-w-[240px] overflow-hidden rounded px-2 py-1 text-xs leading-5',
        'bg-bg-highlight text-text-on-primary shadow-sm',
        className
      )}
      {...props}
    />
  </TooltipPrimitive.Portal>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export interface TooltipProps {
  content: React.ReactNode
  children: React.ReactNode
  side?: 'top' | 'right' | 'bottom' | 'left'
  contentClassName?: string
}

function Tooltip({ content, children, side = 'top', contentClassName }: TooltipProps) {
  return (
    <TooltipRoot>
      <TooltipTrigger asChild>{children}</TooltipTrigger>
      <TooltipContent side={side} className={contentClassName}>
        {content}
      </TooltipContent>
    </TooltipRoot>
  )
}
Tooltip.displayName = 'Tooltip'

export {
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  TooltipContent,
  Tooltip,
}