import React from 'react';

export default function ResultDisplay({ result }) {
    // หากไม่มีผลลัพธ์ (result เป็น null) ก็ไม่ต้องแสดงผลอะไร
    if (!result) {
        return null;
    }

    return (
        <div className="mt-6 alert alert-success shadow-lg">
            <div>
                <h3 className="font-bold">Inference Success!</h3>
                <p className="text-sm">ได้รับผลลัพธ์จากเซิร์ฟเวอร์แล้ว (JSON Payload)</p>
            </div>

            {/* แสดงผลลัพธ์ JSON ในรูปแบบที่อ่านง่าย */}
            <pre className="text-sm mt-2 bg-base-100 p-2 rounded max-h-60 overflow-auto border border-base-300
                        text-base-content whitespace-pre-wrap break-words">
                {/* text-base-content: เพื่อให้สีตัวอักษรเป็นสีพื้นฐานของ Theme (ไม่ใช่สีขาว) */}
                {/* whitespace-pre-wrap: บังคับให้ข้อความขึ้นบรรทัดใหม่แม้จะอยู่ใน <pre> */}
                {JSON.stringify(result, null, 2)}
            </pre>
        </div>
    );
}