import { Card, Text, Group, Stack, Badge } from "@mantine/core";
import { IconCheck, IconAlertTriangle, IconX } from "@tabler/icons-react";

// 状态映射：颜色 + 图标
const healthMap = {
  activate: { color: "green", icon: IconCheck },
  error: { color: "red", icon: IconX },
  warning: { color: "yellow", icon: IconAlertTriangle },
  inactive: { color: "gray", icon: IconX },
};

export default function NodeHealthCard({ node }) {
  if (!node || !node.health) return null;

  const items = Object.entries(node.health); // [['agent', 'activate'], ...]

  return (
    <Card shadow="sm" radius="md" withBorder>
      <Text fw={600} mb="sm">健康状态</Text>
      <Stack spacing="xs">
        {items.map(([component, status]) => {
          const { color, icon: Icon } = healthMap[status] || healthMap.inactive;
          return (
            <Group key={component} spacing="sm">
              {/* 组件名 */}
              <Text size="sm" fw={600} style={{ minWidth: 60 }}>
                {component}
              </Text>

              {/* 状态标签 */}
              <Badge color={color} leftSection={<Icon size={14} />} variant="filled">
                {status}
              </Badge>
            </Group>
          );
        })}
      </Stack>
    </Card>
  );
}