'use client';

import { Badge } from '@/components/ui/Badge';
import { JiraAnomaly } from '@/services/integrations/jira/anomaly-detection';

interface AnomalySummaryProps {
  anomalies: JiraAnomaly[];
  isExpanded: boolean;
  onToggleExpanded: () => void;
}

export function AnomalySummary({ anomalies, isExpanded, onToggleExpanded }: AnomalySummaryProps) {
  const criticalCount = anomalies.filter(a => a.severity === 'critical').length;
  const highCount = anomalies.filter(a => a.severity === 'high').length;
  const totalCount = anomalies.length;

  return (
    <div 
      className="cursor-pointer hover:bg-[var(--muted)] transition-colors"
      onClick={onToggleExpanded}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="transition-transform duration-200" style={{ transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)' }}>
            ▶
          </span>
          <h3 className="font-semibold">🔍 Détection d&apos;anomalies</h3>
          {totalCount > 0 && (
            <div className="flex gap-1">
              {criticalCount > 0 && (
                <Badge className="bg-red-100 text-red-800 text-xs">
                  {criticalCount} critique{criticalCount > 1 ? 's' : ''}
                </Badge>
              )}
              {highCount > 0 && (
                <Badge className="bg-orange-100 text-orange-800 text-xs">
                  {highCount} élevée{highCount > 1 ? 's' : ''}
                </Badge>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}