"use client";

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 || "—";

  return (
    <div className="card p-4 flex items-center justify-between">
      <div>
        <div className="text-[13px] font-mono" style={{ color: "var(--text-2)" }}>
          {model}
        </div>
      </div>
      <div className="flex items-center gap-2">
        <div
          className="w-2 h-2 rounded-full"
          style={{ background: online ? "#34c759" : "#ff3b30" }}
        />
        <span className="text-xs" style={{ color: online ? "#34c759" : "#ff3b30" }}>
          {online ? "Online" : "Offline"}
        </span>
      </div>
    </div>
  );
}