import { Head } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';

interface LogEntry {
    id: number;
    level: string;
    message: string;
    created_at: string;
}

export default function Server({ logs }: { logs: { data: LogEntry[] } }) {
    return (
        <AdminLayout>
            <Head title="Server Logs" />
            <h1 className="mb-6 text-2xl font-bold">Server Logs</h1>

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 font-mono text-xs ring-1 ring-white/10">
                {logs.data.map((log) => (
                    <div key={log.id} className="flex gap-3 px-4 py-2">
                        <span className="text-gray-600">{new Date(log.created_at).toLocaleString()}</span>
                        <span
                            className={`uppercase ${
                                log.level === 'error' ? 'text-red-400' : log.level === 'warn' ? 'text-amber-400' : 'text-gray-400'
                            }`}
                        >
                            {log.level}
                        </span>
                        <span className="text-gray-200">{log.message}</span>
                    </div>
                ))}
                {logs.data.length === 0 && <p className="px-4 py-4 font-sans text-gray-400">No log entries yet.</p>}
            </div>
        </AdminLayout>
    );
}
