import * as React from 'react'
import * as RTooltip from '@radix-ui/react-tooltip'
import { cn } from './cva'

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

export function Tooltip({ content, children, side = 'top', className }: TooltipProps) {
  return (
    <RTooltip.Provider delayDuration={0}>
      <RTooltip.Root>
        <RTooltip.Trigger asChild>{children}</RTooltip.Trigger>
        <RTooltip.Portal>
          <RTooltip.Content
            side={side}
            className={cn(
              'rounded-md border border-border bg-[var(--mod-color-neutral-3)] px-2 py-1 text-xs text-[var(--mod-color-neutral-11)] shadow-[var(--mod-shadow-sm)]',
              className,
            )}
          >
            {content}
          </RTooltip.Content>
        </RTooltip.Portal>
      </RTooltip.Root>
    </RTooltip.Provider>
  )
}