'use no memo'; // composition props usually invalidate the generated wrapper caches

import type { ReactElement, RefObject } from 'react';

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

import { Text } from '#/components/Text';
import * as styles from '#/components/Tooltip.css';

export type TooltipProps = {
	/**
	 * the trigger element. must forward a ref and spread DOM props onto its host node so the tooltip can wire
	 * its hover/focus behavior.
	 */
	children: ReactElement;
	/** The hint shown in the popup on hover/focus. */
	label: string;
	/** portal target. */
	container?: RefObject<HTMLElement | null>;
};

/** A hover/focus hint built on Base UI's Tooltip, wrapping a single ref-forwarding trigger element. */
export function Tooltip({ children, label, container }: TooltipProps) {
	return (
		<BaseTooltip.Root disableHoverablePopup>
			<BaseTooltip.Trigger render={children} />
			<BaseTooltip.Portal container={container}>
				<BaseTooltip.Positioner className={styles.positioner} side="top" sideOffset={6}>
					<BaseTooltip.Popup className={styles.popup}>
						<Text color="text" size="sm" weight="medium">
							{label}
						</Text>
					</BaseTooltip.Popup>
				</BaseTooltip.Positioner>
			</BaseTooltip.Portal>
		</BaseTooltip.Root>
	);
}