"use client";

import { Cpu, Wifi, WifiOff } from "lucide-react";
import { useHealth, useConfig } from "@/lib/hooks";

export function StatusCard() {
  const { data: health } = useHealth();
  const { data: config } = useConfig();

  const online = health?.status === "ok";
  const model = config?.model || "—";
  const provider = config?.provider || "custom";

  return (
    <div className="glass p-4">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <Cpu size={18} style={{ color: "#f59e0b" }} />
          <span className="font-semibold text-sm">Hermes</span>
        </div>
        <div className="flex items-center gap-1.5">
          <div
            className="w-2 h-2 rounded-full"
            style={{
              background: online ? "#22c55e" : "#ef4444",
            }}
          />
          {online ? (
            <Wifi size={14} style={{ color: "#22c55e" }} />
          ) : (
            <WifiOff size={14} style={{ color: "#ef4444" }} />
          )}
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3 text-xs">
        <div>
          <div className="text-zinc-500">Model</div>
          <div className="text-zinc-200 font-mono truncate">{model}</div>
        </div>
        <div>
          <div className="text-zinc-500">Provider</div>
          <div className="text-zinc-200 font-mono truncate">{provider}</div>
        </div>
      </div>
    </div>
  );
}