import { ServiceStatus } from '@/types/monitoring';
import { cn } from '@/lib/utils';
import { CheckCircle2, AlertTriangle, XCircle, HelpCircle } from 'lucide-react';

interface OverallStatusProps {
  status: ServiceStatus;
  totalServices: number;
  operationalServices: number;
}

const statusConfig = {
  operational: {
    icon: CheckCircle2,
    title: 'Tous les systèmes sont opérationnels',
    bgClass: 'bg-success/10 border-success/30',
    iconClass: 'text-success',
  },
  degraded: {
    icon: AlertTriangle,
    title: 'Certains systèmes sont dégradés',
    bgClass: 'bg-warning/10 border-warning/30',
    iconClass: 'text-warning',
  },
  down: {
    icon: XCircle,
    title: 'Incident majeur en cours',
    bgClass: 'bg-destructive/10 border-destructive/30',
    iconClass: 'text-destructive',
  },
  unknown: {
    icon: HelpCircle,
    title: 'Status inconnu',
    bgClass: 'bg-muted border-muted-foreground/20',
    iconClass: 'text-muted-foreground',
  },
};

export function OverallStatus({ status, totalServices, operationalServices }: OverallStatusProps) {
  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <div className={cn(
      'p-4 sm:p-6 rounded-xl border-2 animate-fade-in',
      config.bgClass,
    )}>
      <div className="flex items-center gap-3 sm:gap-4">
        <div className={cn('p-2 sm:p-3 rounded-full flex-shrink-0', config.bgClass)}>
          <Icon className={cn('w-6 h-6 sm:w-8 sm:h-8', config.iconClass)} />
        </div>
        <div className="min-w-0">
          <h2 className="text-base sm:text-xl font-bold leading-tight">{config.title}</h2>
          <p className="text-sm sm:text-base text-muted-foreground">
            {operationalServices}/{totalServices} services opérationnels
          </p>
        </div>
      </div>
    </div>
  );
}