import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { DownstreamServiceHealth } from "@/types";

export function ServiceHealthList({ services }: { services: DownstreamServiceHealth[] }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Services</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {services.map((service) => (
          <div key={service.service} className="flex items-center justify-between gap-3 text-sm">
            <div className="min-w-0">
              <p className="truncate font-medium">{service.service}</p>
              <p className="truncate text-xs text-muted-foreground">{service.url}</p>
            </div>
            <span className={service.status === "ok" ? "h-2.5 w-2.5 rounded-full bg-emerald-400" : "h-2.5 w-2.5 rounded-full bg-red-400"} />
          </div>
        ))}
      </CardContent>
    </Card>
  );
}