import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { api, Server } from "../api/client";
import { PageState } from "../components/PageState";
import { StatusBadge } from "../components/StatusBadge";

export function Servers() { const [items, setItems] = useState<Server[]>(); const [error, setError] = useState<Error>(); useEffect(() => { api.servers().then(setItems).catch(setError); }, []); if (!items) return <PageState error={error} />;
 return <><section className="title"><div><h1>Server</h1><p>{items.length} registriert</p></div></section><section className="table-wrap"><table><thead><tr><th>ID</th><th>Name</th><th>Status</th><th>Spieler</th><th>Kapazität</th><th>Port</th><th>Query Port</th><th>Wrapper</th></tr></thead><tbody>{items.map(item => <tr key={item.id}><td><Link to={`/servers/${item.id}`}>{item.id}</Link></td><td>{item.name}</td><td><StatusBadge status={item.status} /></td><td>{item.players}</td><td>{item.maxPlayers}</td><td>{item.port}</td><td>{item.queryPort}</td><td>{item.wrapperId}</td></tr>)}</tbody></table></section></>;
}