import React from 'react';
import { clsx } from 'clsx';
import * as BaseTooltip from '@radix-ui/react-tooltip';

import * as css from './tooltip-content.css';

export type TooltipContentProps = BaseTooltip.TooltipContentProps &
  css.ContentVariants & {
    withArrow?: boolean;
  };

export const TooltipContent = React.forwardRef<
  HTMLDivElement,
  TooltipContentProps
>(function TooltipContent(
  { children, withArrow, className, size, color, ...rest },
  ref,
) {
  return (
    <BaseTooltip.TooltipContent
      {...rest}
      className={clsx(className, css.content({ color, size }))}
      ref={ref}
    >
      {withArrow && <BaseTooltip.Arrow className={css.arrow} />}
      {children}
    </BaseTooltip.TooltipContent>
  );
});