import React from 'react';
import {FaEnvelope, FaQuestionCircle, FaClock, FaExclamationTriangle, FaPhoneAlt} from 'react-icons/fa';

export default function ResetInfoCard() {
    return (
        // ใช้ w-full h-full เพื่อให้ Component ขยายเต็มพื้นที่ Container
        <div className="w-full h-full p-12 bg-base-200 flex flex-col justify-between">

            <div className="flex flex-col">
                <div className="flex items-center text-xl font-bold text-primary mb-4 border-b border-base-200 pb-3">
                    <FaQuestionCircle className="w-6 h-6 mr-3 text-warning" />
                    คำแนะนำในการรีเซ็ตรหัสผ่าน
                </div>

                {/* 1. ขั้นตอนการรีเซ็ต */}
                <h3 className="text-lg font-semibold text-base-content mb-2 flex items-center">
                    <FaClock className="w-4 h-4 mr-2 text-info" />
                    กระบวนการ
                </h3>
                <ol className="list-decimal list-inside space-y-2 text-sm text-base-content/70 ml-4">
                    <li>กรุณากรอกอีเมลที่ใช้ลงทะเบียน</li>
                    <li>ระบบจะส่งลิงก์รีเซ็ตไปให้คุณ</li>
                    <li>ลิงก์จะหมดอายุภายใน <b>24 ชั่วโมง</b></li>
                    <li>หากไม่พบอีเมล ให้ตรวจสอบใน <b>/Spam Folder</b></li>
                </ol>

                <div className="divider my-4"></div>

                {/* 2. ช่องทางติดต่อช่วยเหลือ */}
                <h3 className="text-lg font-semibold text-base-content mb-2 flex items-center">
                    <FaExclamationTriangle className="w-4 h-4 mr-2 text-error" />
                    หากไม่ได้รับอีเมล
                </h3>
                <ul className="space-y-2 text-sm text-base-content/70 ml-2">
                    <li className='flex items-center'>
                        <FaEnvelope className="w-4 h-4 mr-2 text-info" />
                        <span className="font-semibold">ติดต่อ:</span> support@ddo.tech
                    </li>
                    <li className='flex items-center'>
                        <FaPhoneAlt className="w-4 h-4 mr-2 text-info" />
                        <span className="font-semibold">โทร:</span> 02-XXX-XXXX
                    </li>
                </ul>
            </div>
        </div>
    );
}