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

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

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

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 text-sm ring-1 ring-white/10">
                {logs.data.map((log) => (
                    <div key={log.id} className="px-4 py-3">
                        <p className="text-gray-200">{log.message}</p>
                        <p className="text-xs text-gray-500">{log.type} · {new Date(log.created_at).toLocaleString()}</p>
                    </div>
                ))}
                {logs.data.length === 0 && <p className="px-4 py-4 text-gray-400">No Discord events logged yet.</p>}
            </div>
        </AdminLayout>
    );
}
