frontend/src/components/ApiStatus.tsx

import { useEffect, useState } from "react";
import { API_BASE } from "../lib/api";

type Status = "idle" | "ok" | "fail";

export default function ApiStatus() {
  const [api, setApi] = useState<Status>("idle");
  const [db, setDb] = useState<Status>("idle");

  useEffect(() => {
    // API check
    fetch(`${API_BASE}/health`, { method: "GET" })
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then(() => setApi("ok"))
      .catch(() => setApi("fail"));

    // DB/data check
    fetch(`${API_BASE}/api/products?limit=1`, { method: "GET" })
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then(() => setDb("ok"))
      .catch(() => setDb("fail"));
  }, []);

  const pill = (label: string, s: Status) => {
    const cls =
      s === "ok"
        ? "bg-green-100 text-green-700"
        : s === "fail"
        ? "bg-red-100 text-red-700"
        : "bg-gray-100 text-gray-600";
    return <span className={`px-2 py-1 rounded-full text-xs ${cls}`}>{label}</span>;
  };

  return (
    <div className="flex items-center gap-2" title={API_BASE}>
      {pill("API", api)}
      {pill("DB", db)}
    </div>
  );
}