import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
import { Tooltip as RTooltip } from 'radix-ui';
import { cx } from '../utils';

type TooltipProps = {
  content: ReactNode;
  children: ReactNode;
  delayDuration?: number;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (o: boolean) => void;
} & Omit<ComponentPropsWithoutRef<typeof RTooltip.Content>, 'children' | 'content'>;

export const Tooltip = ({
  content,
  children,
  delayDuration,
  open,
  defaultOpen,
  onOpenChange,
  sideOffset = 6,
  className,
  ...contentProps
}: TooltipProps) => (
  <RTooltip.Root
    delayDuration={delayDuration}
    open={open}
    defaultOpen={defaultOpen}
    onOpenChange={onOpenChange}
  >
    <RTooltip.Trigger asChild>{children}</RTooltip.Trigger>
    <RTooltip.Portal>
      <RTooltip.Content
        className={cx('mta-tooltip', className)}
        sideOffset={sideOffset}
        {...contentProps}
      >
        {content}
      </RTooltip.Content>
    </RTooltip.Portal>
  </RTooltip.Root>
);
