'use client';
import { useState } from 'react';
import { VibezBillingModal } from 'vibezcheck/react';

export function TopUpDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Top-Up Modal</button>

      <VibezBillingModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        notice={{
          status: 'limit_reached',
          tokensUsed: 150000,
          costUSD: 5.00,
          message: 'Free credit quota reached. Add credits to keep streaming!',
        }}
        theme="light"
        testMode={true}
        onTopUp={async (amount) => {
          console.log(`User selected $${amount} top-up`);
        }}
      />
    </div>
  );
}