import { Suspense } from 'react';
import { Loader2 } from 'lucide-react';
import { BillingPlans } from '@/components/settings/billing-plans';

export const metadata = {
  title: 'Billing',
};

function Fallback() {
  return (
    <div className="flex items-center justify-center py-16">
      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
    </div>
  );
}

export default function BillingPage() {
  return (
    <Suspense fallback={<Fallback />}>
      <BillingPlans />
    </Suspense>
  );
}