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

interface OnlinePlayer {
    id: number;
    citizen_id: string | null;
    name: string;
    source_id: number;
    server: { name: string };
}

export default function OnlinePlayers({ players }: { players: OnlinePlayer[] }) {
    return (
        <AdminLayout>
            <Head title="Online Players" />
            <h1 className="mb-6 text-2xl font-bold">Online Players ({players.length})</h1>

            <table className="w-full overflow-hidden rounded-lg bg-gray-900 text-sm ring-1 ring-white/10">
                <thead className="bg-gray-800 text-left text-gray-400">
                    <tr>
                        <th className="px-4 py-2">Name</th>
                        <th className="px-4 py-2">ID</th>
                        <th className="px-4 py-2">Citizen ID</th>
                        <th className="px-4 py-2">Server</th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-white/10">
                    {players.map((p) => (
                        <tr key={p.id}>
                            <td className="px-4 py-2">{p.name}</td>
                            <td className="px-4 py-2 text-gray-400">{p.source_id}</td>
                            <td className="px-4 py-2 text-gray-400">{p.citizen_id ?? '—'}</td>
                            <td className="px-4 py-2 text-gray-400">{p.server.name}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </AdminLayout>
    );
}
