src/app/components/StatisticsBar.tsx

import { TrendingDown, AlertTriangle, Shield, Target } from 'lucide-react';

interface StatisticsBarProps {
  totalPatterns: number;
  criticalCount: number;
  complianceScore: number;
  avgConfidence: number;
}

export function StatisticsBar({
  totalPatterns,
  criticalCount,
  complianceScore,
  avgConfidence,
}: StatisticsBarProps) {
  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      {/* Critical Card */}
      <div className="bg-gradient-to-br from-rose-500/10 via-rose-500/5 to-transparent border border-rose-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-rose-500/40 transition-all duration-300">
        <div className="absolute top-0 right-0 w-24 h-24 bg-rose-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
        <div className="flex items-center justify-between mb-2">
          <AlertTriangle className="w-5 h-5 text-rose-400 group-hover:scale-110 transition-transform" />
          <span className="text-[10px] font-bold text-rose-400 uppercase tracking-widest bg-rose-500/10 px-2 py-0.5 rounded-md border border-rose-500/20">
            Critical
          </span>
        </div>
        <div className="text-4xl font-extrabold text-foreground mt-2">{criticalCount}</div>
        <div className="text-xs text-muted-foreground mt-1.5 font-medium">Violations Detected</div>
      </div>

      {/* Total Card */}
      <div className="bg-gradient-to-br from-indigo-500/10 via-indigo-500/5 to-transparent border border-indigo-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
        <div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
        <div className="flex items-center justify-between mb-2">
          <TrendingDown className="w-5 h-5 text-indigo-400 group-hover:scale-110 transition-transform" />
          <span className="text-[10px] font-bold text-indigo-400 uppercase tracking-widest bg-indigo-500/10 px-2 py-0.5 rounded-md border border-indigo-500/20">
            Total
          </span>
        </div>
        <div className="text-4xl font-extrabold text-foreground mt-2">{totalPatterns}</div>
        <div className="text-xs text-muted-foreground mt-1.5 font-medium">Deceptive Copy Blocks</div>
      </div>

      {/* Compliance Card */}
      <div className="bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-transparent border border-emerald-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-emerald-500/40 transition-all duration-300">
        <div className="absolute top-0 right-0 w-24 h-24 bg-emerald-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
        <div className="flex items-center justify-between mb-2">
          <Shield className="w-5 h-5 text-emerald-400 group-hover:scale-110 transition-transform" />
          <span className="text-[10px] font-bold text-emerald-400 uppercase tracking-widest bg-emerald-500/10 px-2 py-0.5 rounded-md border border-emerald-500/20">
            CFPB
          </span>
        </div>
        <div className="text-4xl font-extrabold text-foreground mt-2">
          {isNaN(complianceScore) ? 100 : complianceScore}%
        </div>
        <div className="text-xs text-muted-foreground mt-1.5 font-medium">Compliance Rating</div>
      </div>

      {/* Confidence Card */}
      <div className="bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent border border-cyan-500/20 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-cyan-500/40 transition-all duration-300">
        <div className="absolute top-0 right-0 w-24 h-24 bg-cyan-500/10 rounded-full blur-2xl -z-10 pointer-events-none" />
        <div className="flex items-center justify-between mb-2">
          <Target className="w-5 h-5 text-cyan-400 group-hover:scale-110 transition-transform" />
          <span className="text-[10px] font-bold text-cyan-400 uppercase tracking-widest bg-cyan-500/10 px-2 py-0.5 rounded-md border border-cyan-500/20">
            AI Model
          </span>
        </div>
        <div className="text-4xl font-extrabold text-foreground mt-2">
          {isNaN(avgConfidence) ? 0 : avgConfidence}%
        </div>
        <div className="text-xs text-muted-foreground mt-1.5 font-medium">Avg NLP Confidence</div>
      </div>
    </div>
  );
}