import { Card, Group, Text, Badge, Stack, Anchor } from "@mantine/core";
import { Link } from "react-router-dom";

export function AlertStats({ stats, layout = "row", title, link }) {
  const Wrapper = layout === "row" ? Group : Stack;

  return (
    <Card withBorder radius="md" shadow="sm" p="md" mb="md">
      {(title || link) && (
        <Group position="apart" mb="sm">
          {title && <Text fw={700} size="lg">{title}</Text>}
          {link && (
            <Anchor component={Link} to={link} size="sm" underline>
              查看更多
            </Anchor>
          )}
        </Group>
      )}

      <Wrapper spacing="xl" grow>
        <Group spacing="xs">
          <Badge color="gray" radius="sm" variant="filled">●</Badge>
          <Text size="sm" fw={500}>总数</Text>
          <Text fw={700} color="gray">{stats.total || 0}</Text>
        </Group>

        <Group spacing="xs">
          <Badge color="red" radius="sm" variant="filled">●</Badge>
          <Text size="sm" fw={500}>严重</Text>
          <Text fw={700} color="red">{stats.critical || 0}</Text>
        </Group>

        <Group spacing="xs">
          <Badge color="orange" radius="sm" variant="filled">●</Badge>
          <Text size="sm" fw={500}>警告</Text>
          <Text fw={700} color="orange">{stats.warning || 0}</Text>
        </Group>

        <Group spacing="xs">
          <Badge color="blue" radius="sm" variant="filled">●</Badge>
          <Text size="sm" fw={500}>信息</Text>
          <Text fw={700} color="blue">{stats.info || 0}</Text>
        </Group>
      </Wrapper>
    </Card>
  );
}
