import { Tooltip as ChakraTooltip } from '@chakra-ui/react';
import { ComponentProps, PropsWithChildren } from 'react';

import { SUPER_MODAL_Z_INDEX } from '@/utils/constants';
import { colorVar } from '@/utils/utils';

export type TooltipProps = ComponentProps<typeof ChakraTooltip> &
  PropsWithChildren & {
    isTooltipEnabled?: boolean; // Custom prop to conditionally disable tooltip
  };

export const Tooltip = ({
  label,
  children,
  placement,
  isTooltipEnabled,
  ...restProps
}: TooltipProps) => {
  return (
    <ChakraTooltip
      {...restProps}
      isDisabled={isTooltipEnabled === false}
      fontFamily={'Neue Montreal'}
      label={label}
      size='sm'
      placement={placement}
      background={colorVar('background/fog/thin')}
      backdropFilter='blur(50px)'
      borderRadius='8px'
      color={colorVar('foreground/primary')}
      padding='8px 12px'
      zIndex={SUPER_MODAL_Z_INDEX + 1}
    >
      {children}
    </ChakraTooltip>
  );
};