import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';

import { tooltipStyles } from './styles';

export interface TooltipProps {
  content: ReactNode;
  children: ReactNode;
}

export const Tooltip = ({ content, children }: TooltipProps) => {
  return (
    <BaseTooltip.Root>
      <BaseTooltip.Trigger
        {...stylex.props(tooltipStyles.trigger)}
        render={(props) => <span {...props}>{children}</span>}
      />
      <BaseTooltip.Portal>
        <BaseTooltip.Positioner
          {...stylex.props(tooltipStyles.positioner)}
          side="top"
          sideOffset={8}
        >
          <BaseTooltip.Popup {...stylex.props(tooltipStyles.popup)}>
            {content}
          </BaseTooltip.Popup>
        </BaseTooltip.Positioner>
      </BaseTooltip.Portal>
    </BaseTooltip.Root>
  );
};