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

export default function RegisterInfoCard() {
    return (
        // ใช้ w-full h-full เพื่อให้ Component ขยายเต็มพื้นที่ Container
        <div className="w-full h-full p-0 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">1. แนวทางการกรอกข้อมูล</h3>
            <ul className="list-disc list-inside space-y-2 text-sm text-base-content/70 ml-2">
                <li><span className="font-semibold">ชื่อผู้ใช้งาน:</span> ใช้ตัวอักษร/ตัวเลขเท่านั้น (ขั้นต่ำ 4 ตัว)</li>
                <li><span className="font-semibold">รหัสผ่าน:</span> ต้องยาวอย่างน้อย 8 ตัวอักษร</li>
                <li><span className="font-semibold">เบอร์โทรศัพท์:</span> เป็นตัวเลข 10 หลัก (ไม่บังคับ)</li>
            </ul>

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

            {/* 2. ช่องทางติดต่อช่วยเหลือ */}
            <h3 className="text-lg font-semibold text-base-content mb-2">2. ช่องทางติดต่อช่วยเหลือ</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">Email:</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>
    );
}