'use client'

import { forwardRef, HTMLAttributes } from 'react'
import { cn } from '@/utils/helpers'

export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
  content: string
  position?: 'top' | 'bottom' | 'left' | 'right'
  children: React.ReactElement
}

export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
  ({ className, content, position = 'top', children, ...props }, ref) => {
    if (!React.isValidElement(children)) {
      return <>{children}</>
    }

    const positions = {
      top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
      bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
      left: 'right-full top-1/2 -translate-y-1/2 mr-2',
      right: 'left-full top-1/2 -translate-y-1/2 ml-2',
    }

    return (
      <div ref={ref} className={cn('relative inline-block', className)} {...props}>
        {children}
        <div
          className={cn(
            'absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg',
            'opacity-0 invisible transition-all duration-200',
            'group-hover:opacity-100 group-hover:visible',
            'whitespace-nowrap',
            positions[position]
          )}
          role="tooltip"
        >
          {content}
          <div
            className={cn(
              'absolute w-0 h-0 border-4 border-transparent',
              position === 'top' && 'bottom-[-8px] left-1/2 -translate-x-1/2 border-t-gray-900',
              position === 'bottom' && 'top-[-8px] left-1/2 -translate-x-1/2 border-b-gray-900',
              position === 'left' && 'right-[-8px] top-1/2 -translate-y-1/2 border-l-gray-900',
              position === 'right' && 'left-[-8px] top-1/2 -translate-y-1/2 border-r-gray-900'
            )}
          />
        </div>
      </div>
    )
  }
)

Tooltip.displayName = 'Tooltip'

// Need to import React
import React from 'react'