import { BillingApp } from '@brikl/ui';

const plans = [
  {
    id: 'starter',
    name: 'Starter',
    price: 9.99,
    interval: 'month',
    features: [
      '1 utilisateur',
      '10GB stockage',
      'Support email',
      'API de base'
    ]
  },
  {
    id: 'pro',
    name: 'Professionnel',
    price: 29.99,
    interval: 'month',
    features: [
      '5 utilisateurs',
      '100GB stockage',
      'Support prioritaire',
      'API complète',
      'Analytics avancées'
    ],
    popular: true
  },
  {
    id: 'enterprise',
    name: 'Entreprise',
    price: 99.99,
    interval: 'month',
    features: [
      'Utilisateurs illimités',
      'Stockage illimité',
      'Support dédié',
      'API personnalisée',
      'SLA garanti'
    ]
  }
];

<BillingApp
  plans={plans}
  currentPlan="pro"
  onPlanChange={handlePlanChange}
/>

<BillingApp
  paymentMethods={[
    {
      id: 'card_1',
      type: 'card',
      brand: 'visa',
      last4: '4242',
      expMonth: 12,
      expYear: 2025,
      isDefault: true
    },
    {
      id: 'card_2',
      type: 'card',
      brand: 'mastercard',
      last4: '5555',
      expMonth: 8,
      expYear: 2026,
      isDefault: false
    }
  ]}
  onAddPaymentMethod={handleAddPaymentMethod}
  onRemovePaymentMethod={handleRemovePaymentMethod}
  onSetDefaultPaymentMethod={handleSetDefault}
/>

<BillingApp
  invoices={[
    {
      id: 'inv_001',
      number: 'INV-2024-001',
      amount: 29.99,
      status: 'paid',
      date: '2024-01-15',
      dueDate: '2024-01-15',
      items: [
        { description: 'Plan Professionnel', amount: 29.99 }
      ]
    },
    {
      id: 'inv_002',
      number: 'INV-2024-002',
      amount: 29.99,
      status: 'pending',
      date: '2024-02-15',
      dueDate: '2024-02-15',
      items: [
        { description: 'Plan Professionnel', amount: 29.99 }
      ]
    }
  ]}
  onDownloadInvoice={handleDownloadInvoice}
/>

<BillingApp
  stripe={{
    publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    clientSecret: process.env.STRIPE_CLIENT_SECRET
  }}
  onPaymentSuccess={handlePaymentSuccess}
  onPaymentError={handlePaymentError}
/>

<BillingApp
  paypal={{
    clientId: process.env.PAYPAL_CLIENT_ID,
    environment: 'production'
  }}
/>

import { BillingApp } from '@brikl/ui';

export default function BillingPage() {
  const [currentPlan, setCurrentPlan] = useState('pro');
  const [paymentMethods, setPaymentMethods] = useState([]);
  const [invoices, setInvoices] = useState([]);

  const handlePlanChange = async (planId) => {
    try {
      await updateSubscription(planId);
      setCurrentPlan(planId);
      showSuccess('Plan mis à jour avec succès');
    } catch (error) {
      showError('Erreur lors de la mise à jour du plan');
    }
  };

  const handleAddPaymentMethod = async (paymentMethod) => {
    try {
      const newMethod = await addPaymentMethod(paymentMethod);
      setPaymentMethods([...paymentMethods, newMethod]);
      showSuccess('Méthode de paiement ajoutée');
    } catch (error) {
      showError('Erreur lors de l\'ajout de la méthode de paiement');
    }
  };

  return (
    <BillingApp
      plans={plans}
      currentPlan={currentPlan}
      onPlanChange={handlePlanChange}
      paymentMethods={paymentMethods}
      onAddPaymentMethod={handleAddPaymentMethod}
      onRemovePaymentMethod={handleRemovePaymentMethod}
      invoices={invoices}
      onDownloadInvoice={handleDownloadInvoice}
      stripe={{
        publishableKey: process.env.STRIPE_PUBLISHABLE_KEY
      }}
      theme={{
        primary: '#3B82F6',
        accent: '#10B981'
      }}
    />
  );
}