import Caption from "@/components/TempDesignSystem/Text/Caption"

import { tooltipVariants } from "./variants"

import styles from "./tooltip.module.css"

import { TooltipPosition, TooltipProps } from "@/types/components/tooltip"

export function Tooltip<P extends TooltipPosition>({
  heading,
  text,
  position,
  arrow,
  children,
}: TooltipProps<P>) {
  const className = tooltipVariants({ position, arrow })
  return (
    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
      <div className={className}>
        {heading && (
          <Caption textTransform="bold" color="white">
            {heading}
          </Caption>
        )}
        {text && <Caption color="white">{text}</Caption>}
      </div>
      {children}
    </div>
  )
}