import { Card } from '@/components/ui/card';
import { MessageSendRecord } from '@/types/message';

interface MessageStatsCardsProps {
  sendRecords: MessageSendRecord[];
}

export function MessageStatsCards({ sendRecords }: MessageStatsCardsProps) {
  const stats = [
    {
      label: '总发送数',
      value: sendRecords.length,
      color: 'text-blue-600',
    },
    {
      label: '已发送',
      value: sendRecords.filter(r => r.status === 'sent').length,
      color: 'text-green-600',
    },
    {
      label: '待发送',
      value: sendRecords.filter(r => r.status === 'pending').length,
      color: 'text-yellow-600',
    },
    {
      label: '已取消',
      value: sendRecords.filter(r => r.status === 'cancelled').length,
      color: 'text-gray-600',
    },
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {stats.map((stat, index) => (
        <Card key={index} className="p-4">
          <div className="text-sm text-muted-foreground">{stat.label}</div>
          <div className={`mt-2 text-2xl font-bold ${stat.color}`}>{stat.value}</div>
        </Card>
      ))}
    </div>
  );
}