"use client";

import React from 'react';
import sanitizeHtml from 'sanitize-html';

type Props = { html: string };

export function AnswerBox({ html }: Props) {
    const cleanHtml = sanitizeHtml(html, {
        allowedTags: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'br', 'code', 'pre', 'blockquote', 'h3', 'h4'],
        allowedAttributes: { 'a': ['href', 'class'], 'code': ['class'], 'pre': ['class'] },
        allowedClasses: {
            'a': ['text-primary-600', 'hover:underline'],
        }
    });

    return (
        <section className="rounded-xl border border-blue-100 bg-blue-50/50 p-6 my-8">
            <div className="text-sm font-semibold text-blue-800 uppercase tracking-wider mb-2">Quick Answer</div>
            <div className="prose prose-blue max-w-none text-gray-800" dangerouslySetInnerHTML={{ __html: cleanHtml }} />
        </section>
    );
}
