"use client";

import { CheckCircle2, XCircle } from "lucide-react";

interface Props { name: string; status: string }

export default function HealthIndicator({ name, status }: Props) {
  const ok = status === "healthy";
  return (
    <div className={`flex items-center gap-2 px-4 py-3 rounded-lg border ${ok ? "bg-green-50 border-green-200" : "bg-red-50 border-red-200"}`}>
      {ok ? <CheckCircle2 className="w-4 h-4 text-green-600" /> : <XCircle className="w-4 h-4 text-red-500" />}
      <span className="text-sm font-semibold text-slate-800">{name}</span>
      <span className={`ml-auto text-xs font-bold ${ok ? "text-green-600" : "text-red-500"}`}>{ok ? "Operational" : status}</span>
    </div>
  );
}
