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

export function AlertCard({ alerts, link }) {
  const alertTypes = [
    { label: "严重告警", count: alerts.critical_alerts, color: "red" },
    { label: "主要告警", count: alerts.major_alerts, color: "yellow" },
    { label: "次要告警", count: alerts.minor_alerts, color: "blue" },
  ];

  return (
    <Card shadow="sm" radius="md" p="lg">
      <Text fw={700} size="lg" mb="sm">告警监控</Text>

      <Anchor href={link} target="_blank" size="xl" fw={700} mb="md" display="block">
        {alerts.total_alerts} 待处理告警
      </Anchor>

      {alertTypes.map((a) => (
        <Group position="apart" mb="xs" key={a.label}>
          <Group spacing="xs">
            <span style={{ display: "inline-block", width: 10, height: 10, borderRadius: "50%", backgroundColor: a.color }} />
            <Text size="sm">{a.label}</Text>
          </Group>
          <Anchor href={link} target="_blank" fw={700} color={a.color}>{a.count}</Anchor>
        </Group>
      ))}
    </Card>
  );
}
