useUsageEvents

import { useUsageEvents } from "priceos/react";
import type { MyFeatures } from "./priceos.types";

export function UsageHistory() {
  const { usageEvents, isLoading, hasMore, isLoadingMore, getMore, error } =
    useUsageEvents<MyFeatures>("api_calls", { limit: 20 });

  if (isLoading) return <div>Loading usage events...</div>;
  if (error) return <div>Failed to load usage events.</div>;

  return (
    <div>
      <ul>
        {usageEvents.map((event) => (
          <li key={event.id}>
            {event.amount} at {new Date(event.occurredAt).toLocaleString()}
          </li>
        ))}
      </ul>

      {hasMore ? (
        <button onClick={() => void getMore()} disabled={isLoadingMore}>
          {isLoadingMore ? "Loading..." : "Load more"}
        </button>
      ) : null}
    </div>
  );
}