import React, {FunctionComponent} from "react";
import Tooltip from "/imports/ui/components/general/Tooltip";

interface PromotionTooltipProps {
    amount: number | string
    scrollElementSelector?: string
}

export const PromotionTooltip: FunctionComponent<PromotionTooltipProps> = ({ amount, scrollElementSelector }) => {
    return <>
        <Tooltip
            options={{ position: 'top', alignment: 'center' }}
            clickOpen={true}
            disableHover={true}
            scrollElementSelector={scrollElementSelector}
            toolTipText={`<div>Guess what? Early bird renters like you don't have to pay a service fee. &nbsp;<a target='_blank' class='underline-hover' href='https://intercom.help/everyspace-/en/articles/5985714-early-bird-promotion-terms-conditions'>Learn More</a></div>`}
            render={(ref: string | ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined) => (
                <button
                    ref={ref}
                    type={"button"}
                    onClick={(evt) => console.log(evt.target)} className="pricing-listing-tooltip">
                    <i className="material-icons">info</i>
                </button>
            )} />

        <span className="price-total rose">
            - R {amount}
        </span>
    </>
}