import Pill from './Pill.jsx';
import { formatAge, formatBoolean } from '../lib/format.js';

export default function ServiceCard({ service }) {
  const healthLabel = service.health_status || (service.health_ok ? 'healthy' : service.reachable ? 'degraded' : 'offline');

  return (
    <div className="service-card">
      <div className="service-head">
        <strong>{service.label}</strong>
        <Pill label={healthLabel} stateLabel={healthLabel} />
      </div>
      <div className="service-detail">
        <div>{`Paused ${formatBoolean(service.paused)}`}</div>
        <div>{`Armed ${formatBoolean(service.armed)}`}</div>
        <div>{`Freshness ${formatAge(service.freshness_age_ms)}`}</div>
        {service.health_reasons?.length ? <div>{service.health_reasons.join(' | ')}</div> : null}
        <div className="mono">{service.base_url}</div>
        {service.last_error ? <div>{JSON.stringify(service.last_error)}</div> : null}
      </div>
    </div>
  );
}