import { BillkitProvider, usePlans, useSubscription } from '@saas-billkit/react'

function App() {
  return (
    <BillkitProvider config={{ baseUrl: '/api/billing' }}>
      <BillingPage />
    </BillkitProvider>
  )
}

function BillingPage() {
  const { plans, loading } = usePlans()
  const { subscription } = useSubscription(customerId)
  const { balance } = useCreditBalance(customerId)

  if (loading) return <div>Loading...</div>
  return (
    <div>
      {plans.map((p) => (
        <div key={p.id}>{p.name}</div>
      ))}
    </div>
  )
}