Desktop/ts/components/InContactsIcon.dom.tsx

// Copyright 2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

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

import classNames from 'classnames';

import { Tooltip } from './Tooltip.dom.tsx';
import type { LocalizerType } from '../types/Util.std.ts';

export type PropsType = {
  className?: string;
  tooltipContainerRef?: RefObject<HTMLElement | null>;
  i18n: LocalizerType;
};

export function InContactsIcon(props: PropsType): JSX.Element {
  const { className, i18n, tooltipContainerRef } = props;

  return (
    <Tooltip
      content={i18n('icu:contactInAddressBook')}
      popperModifiers={[
        {
          name: 'preventOverflow',
          options: {
            boundary: tooltipContainerRef?.current || undefined,
          },
        },
      ]}
    >
      <span
        aria-label={i18n('icu:contactInAddressBook')}
        className={classNames('module-in-contacts-icon__icon', className)}
        role="img"
        tabIndex={0}
      />
    </Tooltip>
  );
}