import { Tooltip } from 'react-tooltip';

import type { InputField } from '../../types/config';
import { FormattedText } from '../common/FormattedText';

interface InputFieldTooltipProps {
    id: string;
    field: InputField;
    place?: 'top' | 'right' | 'bottom' | 'left';
    positionStrategy?: 'absolute' | 'fixed';
    className?: string;
    delayShow?: number;
    includeExample?: boolean;
}

export const InputFieldTooltip = ({
    id,
    field,
    place = 'right',
    positionStrategy = 'fixed',
    className = 'z-20 max-w-80 space-y-2 whitespace-normal',
    delayShow = 200,
    includeExample = false,
}: InputFieldTooltipProps) => (
    <Tooltip id={id} place={place} positionStrategy={positionStrategy} className={className} delayShow={delayShow}>
        <p>
            <span className='font-mono font-semibold text-gray-300'>{field.name}</span>
        </p>
        {field.definition && (
            <p>
                <FormattedText text={field.definition} />
            </p>
        )}
        {field.guidance && (
            <p>
                <FormattedText text={field.guidance} />
            </p>
        )}
        {includeExample && field.example !== undefined && <p className='italic'>Example: {field.example}</p>}
    </Tooltip>
);
