import { HtmlHTMLAttributes } from 'react';
export interface FillInBlanksOption {
    id: string;
    option: string;
}
export interface FillInBlanksProps extends HtmlHTMLAttributes<HTMLDivElement> {
    /** The text content with {uuid} placeholders */
    content: string;
    /** Available options to fill in the blanks */
    options: FillInBlanksOption[];
    /** Current answers as a map of placeholderId -> selectedOptionId */
    answers?: Record<string, string>;
    /** Callback when an answer changes (only for interactive mode) */
    onAnswerChange?: (placeholderId: string, optionId: string) => void;
    /** Display mode */
    mode?: 'interactive' | 'readonly' | 'result';
    /** Whether component is disabled (only for interactive mode) */
    disabled?: boolean;
}
/**
 * FillInBlanks component for displaying fill-in-the-blanks questions
 *
 * @example
 * // Readonly mode - shows correct answers with green underlined text
 * <FillInBlanks
 *   content="A {uuid-1} é uma {uuid-2}."
 *   options={[{ id: 'uuid-1', option: 'Terra' }, { id: 'uuid-2', option: 'planeta' }]}
 *   mode="readonly"
 * />
 *
 * @example
 * // Interactive mode - shows select dropdowns
 * <FillInBlanks
 *   content="A {uuid-1} é uma {uuid-2}."
 *   options={[{ id: 'uuid-1', option: 'Terra' }, { id: 'uuid-2', option: 'planeta' }]}
 *   mode="interactive"
 *   answers={answers}
 *   onAnswerChange={(placeholderId, optionId) => setAnswers({...answers, [placeholderId]: optionId})}
 * />
 *
 * @example
 * // Result mode - shows badges with correct/incorrect indicators
 * <FillInBlanks
 *   content="A {uuid-1} é uma {uuid-2}."
 *   options={[{ id: 'uuid-1', option: 'Terra' }, { id: 'uuid-2', option: 'planeta' }]}
 *   mode="result"
 *   answers={userAnswers}
 * />
 */
declare const FillInBlanks: ({ content, options, answers, onAnswerChange, mode, disabled, className, ...props }: FillInBlanksProps) => import("react/jsx-runtime").JSX.Element;
export { FillInBlanks };
//# sourceMappingURL=FillInBlanks.d.ts.map