import { Card, Group, Table, Text } from "@mantine/core";
import NodeStatus from "../components/NodeStatus";
import { Link } from "react-router-dom";

export function ClusterTable({ cluster }) {
    const rows = cluster.nodes.map((n) => {

        return (
            <Table.Tr key={n.id}>
                <Table.Td>{n.id}</Table.Td>
                <Table.Td>{n.name}</Table.Td>
                <Table.Td>
                    <NodeStatus status={n.status} />
                </Table.Td>
                <Table.Td>
                    <Text fw={600} c={n.load > 80 ? "red" : "blue"}>{n.load}%</Text>
                </Table.Td>
            </Table.Tr>
        );
    });

    return (
        <Card shadow="sm" radius="md" p="lg">
            <Group position="apart" align="flex-end" mb="md">
                <Text fw={700} size="lg">集群节点</Text>
                {/* 链接到 /nodeInfo 页面 */}
                <Link to="/nodeInfo" style={{ textDecoration: "none" }}>
                    <Text fw={600} size="xl" color="blue" sx={{ "&:hover": { textDecoration: "underline" } }}>
                        {cluster.total_nodes} 个节点
                    </Text>
                </Link>
            </Group>
            <Table striped highlightOnHover>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>节点ID</Table.Th>
                        <Table.Th>节点名称</Table.Th>
                        <Table.Th>状态</Table.Th>
                        <Table.Th>负载</Table.Th>
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>{rows}</Table.Tbody>
            </Table>
        </Card>
    );
}
