import { PaymentsExtensionProvider } from '@djangocfg/ext-payments/hooks';

export default function RootLayout({ children }) {
  return (
    <PaymentsExtensionProvider>
      {children}
    </PaymentsExtensionProvider>
  );
}

import { usePaymentsContext } from '@djangocfg/ext-payments/hooks';

function CheckoutPage() {
  const { createPayment, isCreatingPayment } = usePaymentsContext();

  const handleCheckout = async () => {
    const payment = await createPayment({
      amount: 99.99,
      currency: 'USD',
      description: 'Premium subscription',
      success_url: '/success',
      cancel_url: '/cancel',
    });

    // Redirect to payment URL
    window.location.href = payment.payment_url;
  };

  return (
    <button onClick={handleCheckout} disabled={isCreatingPayment}>
      {isCreatingPayment ? 'Processing...' : 'Pay $99.99'}
    </button>
  );
}

import { useBalancesContext } from '@djangocfg/ext-payments/hooks';

function WalletPage() {
  const { balances, isLoadingBalances, refreshBalances } = useBalancesContext();

  return (
    <div>
      <h2>Your Balances</h2>
      <button onClick={refreshBalances}>Refresh</button>
      {balances?.map(balance => (
        <div key={balance.currency}>
          <strong>{balance.currency}:</strong> {balance.amount}
        </div>
      ))}
    </div>
  );
}

import { useCurrenciesContext } from '@djangocfg/ext-payments/hooks';

function CurrencySelector() {
  const { currencies, selectedCurrency, setCurrency } = useCurrenciesContext();

  return (
    <select
      value={selectedCurrency?.code}
      onChange={(e) => {
        const currency = currencies.find(c => c.code === e.target.value);
        if (currency) setCurrency(currency);
      }}
    >
      {currencies.map(currency => (
        <option key={currency.code} value={currency.code}>
          {currency.name} ({currency.symbol})
        </option>
      ))}
    </select>
  );
}

import { usePaymentsContext } from '@djangocfg/ext-payments/hooks';

function TransactionsPage() {
  const { payments, isLoadingPayments } = usePaymentsContext();

  return (
    <div>
      <h2>Transaction History</h2>
      {payments.map(payment => (
        <div key={payment.id}>
          <span>{payment.description}</span>
          <span>{payment.amount} {payment.currency}</span>
          <span>Status: {payment.status}</span>
          <span>{new Date(payment.created_at).toLocaleDateString()}</span>
        </div>
      ))}
    </div>
  );
}

import { useOverviewContext } from '@djangocfg/ext-payments/hooks';

function DashboardPage() {
  const { overview, isLoadingOverview } = useOverviewContext();

  if (isLoadingOverview) return <div>Loading...</div>;

  return (
    <div>
      <h2>Payment Overview</h2>
      <div>
        <p>Total Revenue: ${overview.total_revenue}</p>
        <p>Pending Payments: {overview.pending_count}</p>
        <p>Completed Payments: {overview.completed_count}</p>
        <p>This Month: ${overview.current_month_revenue}</p>
      </div>
    </div>
  );
}