import { Card, Col, Row, Statistic } from "tdesign-react";

import type { DashboardResponse } from "../../shared/api";

interface SummaryCardsProps {
  summary: DashboardResponse["summary"] | null;
}

export function SummaryCards({ summary }: SummaryCardsProps) {
  if (!summary) return null;

  const cards = [
    { color: "blue" as const, label: "全部目标", value: summary.total },
    { color: "green" as const, label: "正常", value: summary.up },
    { color: "red" as const, label: "异常", value: summary.down },
    { color: "orange" as const, label: `${summary.window.label} 异常事件数`, value: summary.incidents },
  ];

  return (
    <section className="summary-cards-row">
      <Card bordered={false}>
        <Row gutter={16}>
          {cards.map((card) => (
            <Col className="summary-stat-col" key={card.label} span={3}>
              <Statistic color={card.color} title={card.label} value={card.value} />
            </Col>
          ))}
        </Row>
      </Card>
    </section>
  );
}
