import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { ServiceStatusIndicator, HealthStatus } from './StatusBadge';
import { formatUptime } from '../utils/formatters';
import type { ServiceStatus } from '../types';

interface ServiceCardProps {
  service: ServiceStatus;
}

export function ServiceCard({ service }: ServiceCardProps) {
  return (
    <Card className="p-3">
      <CardHeader className="p-0 pb-2">
        <div className="flex items-center justify-between">
          <h3 className="font-semibold text-sm capitalize text-text-primary">
            {service.name.replace(/-/g, ' ')}
          </h3>
          <ServiceStatusIndicator status={service.status} />
        </div>
      </CardHeader>
      
      <CardContent className="p-0 space-y-1.5 text-xs">
        <div className="flex justify-between">
          <span className="text-text-secondary">Status:</span>
          <span className="font-medium capitalize text-text-primary">{service.status}</span>
        </div>
        
        <div className="flex justify-between">
          <span className="text-text-secondary">Port:</span>
          <span className="font-medium text-text-primary">{service.port || 'N/A'}</span>
        </div>
        
        <div className="flex justify-between">
          <span className="text-text-secondary">Version:</span>
          <span className="font-medium text-text-primary">{service.version}</span>
        </div>
        
        <div className="flex justify-between">
          <span className="text-text-secondary">Uptime:</span>
          <span className="font-medium text-text-primary">{formatUptime(service.uptime)}</span>
        </div>
        
        <div className="flex justify-between items-center">
          <span className="text-text-secondary">Health:</span>
          <HealthStatus healthy={service.healthy} />
        </div>
        
        {service.error && (
          <div className="mt-2 text-xs text-danger bg-danger/10 p-2 rounded">
            Error: {service.error}
          </div>
        )}
      </CardContent>
    </Card>
  );
}