import React from 'react';
import TitleCard from '../components/TitleCard';
import { useLocation } from 'react-router-dom';

function BlankPage({ title, message }) {
    const location = useLocation();

    // ตั้งค่า Default Message ตามประเภทของหน้า
    const defaultTitle = title || "Feature Under Development";
    const defaultMessage = message ||
        `เส้นทางปัจจุบัน: ${location.pathname} ยังไม่มีเนื้อหาที่พร้อมใช้งาน กรุณากลับไปที่หน้าหลักหรือเมนูอื่น`;

    return (
        // ใช้ TitleCard ห่อหุ้มเนื้อหาเพื่อให้มีโครงสร้างเหมือน Page อื่นๆ
        <TitleCard title={defaultTitle} topMargin="mt-0">
            <div className="text-center p-16 bg-base-200 rounded-lg">

                {/* Icon แจ้งเตือน */}
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-16 h-16 mx-auto text-primary mb-4">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" />
                </svg>

                <h1 className="text-2xl font-bold text-base-content/80 mt-4">
                    {defaultTitle}
                </h1>

                <p className="text-gray-600 mt-2 max-w-lg mx-auto whitespace-normal break-words">
                    {defaultMessage}
                </p>

                <div className="mt-8">
                    <a href="/dashboard" className="btn btn-primary">
                        กลับสู่ Dashboard
                    </a>
                </div>
            </div>
        </TitleCard>
    );
}

export default BlankPage;
