'use client';

import { cn } from '@/lib/utils';
import { Card, CardContent } from '@/components/ui/card';
import type { ServiceStatus } from '@/lib/services/system-monitoring.service';

interface ServiceHealthCardProps {
  service: ServiceStatus;
}

const statusConfig = {
  healthy: {
    dot: 'bg-green-500',
    label: 'Healthy',
    labelClass: 'text-green-700 dark:text-green-400',
  },
  degraded: {
    dot: 'bg-yellow-500',
    label: 'Degraded',
    labelClass: 'text-yellow-700 dark:text-yellow-400',
  },
  down: {
    dot: 'bg-red-500',
    label: 'Down',
    labelClass: 'text-red-700 dark:text-red-400',
  },
} as const;

export function ServiceHealthCard({ service }: ServiceHealthCardProps) {
  const config = statusConfig[service.status];

  return (
    <Card className="min-w-[160px]">
      <CardContent className="p-4">
        <div className="flex items-center gap-2 mb-2">
          <span
            className={cn('h-2.5 w-2.5 rounded-full flex-shrink-0', config.dot)}
            aria-hidden="true"
          />
          <span className="font-medium text-sm truncate">{service.name}</span>
        </div>
        <p className={cn('text-xs font-semibold', config.labelClass)}>{config.label}</p>
        <p className="text-xs text-muted-foreground mt-0.5">{service.responseTimeMs}ms</p>
        {service.details && (
          <p className="text-xs text-muted-foreground mt-1 truncate" title={service.details}>
            {service.details}
          </p>
        )}
      </CardContent>
    </Card>
  );
}