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

interface PreferredHoursProps {
    hours: number,
}

export const PreferredHours: FunctionComponent<PreferredHoursProps> = ({ hours }) => {
    return <>
        <Tooltip
            options={{ position: 'top', alignment: 'center' }}
            clickOpen={true}
            disableHover={true}
            toolTipText={`<div>This host has set a preferred minimum hours for bookings. You can still send a request and negotiate directly.</div>`}
            render={(ref: string | ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined) => (
                <h4 className='text-grey display-inline-block'>
                    {hours} hr. minimum Preferred<button ref={ref} type="button" className="pricing-listing-tooltip"><i className='material-icons text-charcoal mr-8'>info</i></button>
                </h4>
            )} />

    </>
}