import { useClient } from "hooks/useClient";
import { useQuery } from "@tanstack/react-query";

// Placeholder. It proves the route mounts and the panel renders, and nothing else.
export const FinancesOverview = () => {
  const client = useClient();
  const { data, isLoading } = useQuery({
    queryKey: ["finances", "ping"],
    queryFn: () =>
      client.get<{ plugin: string; ok: boolean }>("/finances/ping"),
  });

  return (
    <div className="h-full overflow-auto p-6">
      <h2 className="text-lg font-semibold text-duck-dark">Finances</h2>
      <p className="mt-1 text-sm text-duck-dark/60">
        Nothing here yet — the skeleton is up and mounted.
      </p>
      <div className="mt-4 rounded-md border border-duck-dark/10 bg-duck-dark/[0.02] p-3 font-mono text-xs">
        <div className="mb-1 text-duck-dark/50">GET /api/finances/ping</div>
        {isLoading ? (
          <span className="text-duck-dark/40">…</span>
        ) : (
          <span>{JSON.stringify(data)}</span>
        )}
      </div>
    </div>
  );
};