import { SubscriptionCard } from '@/components/billing/subscription-card'
import { PaymentMethodList } from '@/components/billing/payment-method-list'
import { InvoiceTable } from '@/components/billing/invoice-table'
import { mockSubscription, mockPaymentMethods, mockInvoices } from '@/lib/mock-data'

export default function BillingPage() {
  return (
    <div className="flex-1 w-full max-w-7xl mx-auto p-4 lg:p-8 flex flex-col gap-8">
      {/* Header */}
      <div className="flex flex-col gap-1">
        <h1 className="text-3xl lg:text-4xl font-black tracking-tight text-foreground">
          Billing & Invoices
        </h1>
        <p className="text-muted-foreground text-base font-medium">
          Manage your subscription and payment methods
        </p>
      </div>

      {/* Billing Content */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
        {/* Left Column - Subscription & Payment Methods */}
        <div className="xl:col-span-1 flex flex-col gap-6">
          <SubscriptionCard subscription={mockSubscription} />
          <PaymentMethodList paymentMethods={mockPaymentMethods} />
        </div>

        {/* Right Column - Invoice History */}
        <div className="xl:col-span-2">
          <InvoiceTable invoices={mockInvoices} />
        </div>
      </div>
    </div>
  )
}