import type { FC } from 'react';
import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import { NavIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { EVENT_HELP_CLICKED } from '../../constants/events';
import Segment from '../../segment';

const CLASSNAME = 'IntercomButton';
const TERM_HELP = 'navigation_help';

export interface Props {
    asNavLink?: boolean;
}

export const IntercomButton: FC<Props> = ({ asNavLink = false }) => (
    <button
        type="button"
        id="intercom-help-icon"
        className={cx(CLASSNAME, { NavLink: asNavLink })}
        data-testid={CLASSNAME}
        onClick={async () => await Segment.trackEvent(EVENT_HELP_CLICKED)}
    >
        {asNavLink ? (
            <>
                <div className="NavLink-icon">
                    <NavIcon name="HelpNavIcon" />
                </div>
                <span className="NavLink-title">{formatMessage(TERM_HELP)}</span>
            </>
        ) : (
            <>
                <NavIcon name="help" />
                {formatMessage(TERM_HELP)}
            </>
        )}
    </button>
);