import { Bell, CheckCircle2, Clock } from "lucide-react"

export default function TestNotification() {
    return (
        <div>
            <dialog id="test_notification" className="modal">
                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success bg-base-100 shadow-xl">
                    <div className="flex items-center gap-4 mb-6">
                        <div className="bg-success/10 text-success rounded-full p-3 flex items-center justify-center">
                            <Bell className="h-7 w-7" />
                        </div>
                        <div>
                            <h3 className="font-bold text-2xl">Test Notification</h3>
                            <p className="text-sm text-base-content/70">Verify your notification settings</p>
                        </div>
                    </div>
    
                    <div className="bg-base-200/50 p-6 rounded-xl mb-6">
                        <div className="space-y-4">
                            <p className="text-base-content/90">
                                A notification test has been sent to the selected notification provider.
                            </p>
                            <p className="text-sm text-base-content/70">
                                You can click the button below to check the status of the notification test.
                            </p>
                            
                            <div className="flex items-center gap-3 mt-6">
                                <button className="btn btn-success gap-2">
                                    <Clock className="h-4 w-4" />
                                    Check Status
                                </button>
                                
                                <div className="flex items-center gap-2 px-4 py-2 bg-base-300 rounded-lg">
                                    <span className="text-sm font-medium">Status:</span>
                                    <div className="flex items-center gap-1.5 text-warning">
                                        <Clock className="h-4 w-4" />
                                        <span className="text-sm">Pending</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </dialog>
        </div>
    )
}