import React from 'react'
import { Tooltip as ReactTooltip } from 'react-tooltip';

const Tooltip = ({ className, content, iconColor = '#D1D5DB' }) => {
    const randomId = `echorewards-tooltip-${Date.now()}-${Math.floor(Math.random() * 1000)}`;

    return (
        <>
            <ReactTooltip
                className='echorewards-react-tooltip'
                anchorId={`${randomId}`}
                content={content}
                clickable
                // style={{ maxWidth: '500px', lineHeight: '1.5', wordBreak: 'break-word' }}
                style={{ maxWidth: '300px', lineHeight: '1.3', whiteSpace: 'initial', textAlign: 'center', zIndex: "999" }}
            />
            <div className={`echorewards-tooltip ${className}`} id={`${randomId}`}>
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path fillRule="evenodd" clipRule="evenodd" d="M13.4 7.00001C13.4 10.5346 10.5346 13.4 6.99998 13.4C3.46535 13.4 0.599976 10.5346 0.599976 7.00001C0.599976 3.46538 3.46535 0.600006 6.99998 0.600006C10.5346 0.600006 13.4 3.46538 13.4 7.00001ZM6.15145 4.55146C5.91713 4.78577 5.53723 4.78577 5.30292 4.55146C5.0686 4.31714 5.0686 3.93724 5.30292 3.70293C6.24018 2.76567 7.75977 2.76567 8.69703 3.70293C9.63429 4.64019 9.63429 6.15978 8.69703 7.09704C8.38304 7.41103 8.00225 7.62051 7.59998 7.72407V7.99998C7.59998 8.33135 7.33135 8.59998 6.99998 8.59998C6.6686 8.59998 6.39998 8.33135 6.39998 7.99998V7.59998C6.39998 7.02375 6.85593 6.66261 7.26505 6.57058C7.47856 6.52255 7.68126 6.41576 7.8485 6.24851C8.31713 5.77988 8.31713 5.02009 7.8485 4.55146C7.37987 4.08283 6.62008 4.08283 6.15145 4.55146ZM6.99998 11C7.4418 11 7.79998 10.6418 7.79998 10.2C7.79998 9.75818 7.4418 9.40001 6.99998 9.40001C6.55815 9.40001 6.19998 9.75818 6.19998 10.2C6.19998 10.6418 6.55815 11 6.99998 11Z" fill={iconColor} />
                </svg>
            </div>
        </>
    )
}

export default Tooltip