import { Card, Group, Text, RingProgress } from "@mantine/core";

export function HealthCard({ health }) {
  const totalNodes = health.healthy_nodes + health.warning_nodes + health.error_nodes;

  return (
    <Card shadow="sm" radius="md" p="lg">
      <Text fw={700} size="lg" mb="md">健康状态</Text>

      <Group spacing="xl" align="center">
        <RingProgress
          size={140}
          thickness={14}
          sections={[
            { value: (health.healthy_nodes / totalNodes) * 100, color: "green" },
            { value: (health.warning_nodes / totalNodes) * 100, color: "yellow" },
            { value: (health.error_nodes / totalNodes) * 100, color: "red" },
          ]}
          label={<Text fw={700} ta="center" size="lg">{(health.healthy_nodes / totalNodes * 100).toFixed(1)}%</Text>}
        />

        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 8 }}>
          <div style={{ display: "flex", justifyContent: "space-between", width: 120 }}>
            <Text size="sm" color="green">健康节点</Text>
            <Text fw={600}>{health.healthy_nodes}</Text>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", width: 120 }}>
            <Text size="sm" color="yellow">警告节点</Text>
            <Text fw={600}>{health.warning_nodes}</Text>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", width: 120 }}>
            <Text size="sm" color="red">故障节点</Text>
            <Text fw={600}>{health.error_nodes}</Text>
          </div>
        </div>
      </Group>
    </Card>
  );
}
