'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { AlertCircle, Eye, Activity, CheckCircle2 } from 'lucide-react';

interface StatusStatsProps {
  filteredWarnings: Array<{
    status: '未查看' | '已查看' | '处理中' | '已完成';
  }>;
}

export function StatusStats({ filteredWarnings }: StatusStatsProps) {
  const stats = {
    未查看: filteredWarnings.filter(w => w.status === '未查看').length,
    已查看: filteredWarnings.filter(w => w.status === '已查看').length,
    处理中: filteredWarnings.filter(w => w.status === '处理中').length,
    已完成: filteredWarnings.filter(w => w.status === '已完成').length,
  };

  return (
    <div className="grid grid-cols-4 gap-4">
      <Card className="p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">未查看</p>
            <p className="mt-2 text-3xl text-red-600">{stats.未查看}</p>
          </div>
          <AlertCircle className="w-12 h-12 text-red-600 opacity-50" />
        </div>
      </Card>

      <Card className="p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">已查看</p>
            <p className="mt-2 text-3xl text-blue-600">{stats.已查看}</p>
          </div>
          <Eye className="w-12 h-12 text-blue-600 opacity-50" />
        </div>
      </Card>

      <Card className="p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">处理中</p>
            <p className="mt-2 text-3xl text-orange-600">{stats.处理中}</p>
          </div>
          <Activity className="w-12 h-12 text-orange-600 opacity-50" />
        </div>
      </Card>

      <Card className="p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">已完成</p>
            <p className="mt-2 text-3xl text-green-600">{stats.已完成}</p>
          </div>
          <CheckCircle2 className="w-12 h-12 text-green-600 opacity-50" />
        </div>
      </Card>
    </div>
  );
}