import styles from './Tooltip.module.css'
import type { ReactNode } from 'react'

type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'

interface TooltipProps {
  content: ReactNode
  position?: TooltipPosition
  children: ReactNode
  className?: string
}

export function Tooltip({
  content,
  position = 'top',
  children,
  className,
}: TooltipProps) {
  return (
    <span className={`${styles.wrapper} ${className ?? ''}`}>
      {children}
      <span className={`${styles.tip} ${styles[position]}`} role="tooltip">
        {content}
      </span>
    </span>
  )
}
