"use client";

import type { StatusNetworkInfo } from "@/lib/types";

export default function NetworkDetail({ network }: { network: StatusNetworkInfo }) {
  const statusColor = network.status === "online" ? "text-emerald-400" : network.status === "offline" ? "text-red-400" : "text-zinc-400";

  return (
    <div className="flex flex-col gap-2 text-sm">
      <div className="flex justify-between">
        <span className="text-zinc-500">Status</span>
        <span className={`font-mono ${statusColor}`}>{network.status}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Type</span>
        <span className="font-mono text-xs">{network.type}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Latency</span>
        <span>{network.latency_ms !== null ? `${network.latency_ms.toFixed(1)}ms` : "—"}</span>
      </div>
    </div>
  );
}
