'use client';

import { HydratedIsland } from '@/components/HydratedIsland';
import { VendorShell } from '@/components/ui/layout/VendorShell';
import { VendorEarnings } from './VendorEarnings';
import { StripeVendorDashboard } from './StripeVendorDashboard';
import type {
  VendorEarningsRow,
  VendorEarningsSummary,
} from '@/server/domain/vendor-earnings/queries.js';

export interface VendorEarningsPageProps {
  initialData: VendorEarningsRow[];
  initialTotal: number;
  initialSummary: VendorEarningsSummary;
  stripeConnected: boolean;
  stripeAccountId: string | null;
  publishableKey: string;
}

export function VendorEarningsPage({
  initialData,
  initialTotal,
  initialSummary,
  stripeConnected,
  stripeAccountId,
  publishableKey,
}: VendorEarningsPageProps) {
  return (
    <HydratedIsland>
      <VendorShell variant="dashboard" currentPath="/vendor/earnings">
        <div className="flex flex-col gap-10 p-4 lg:p-6">
          <VendorEarnings
            initialData={initialData}
            initialTotal={initialTotal}
            initialSummary={initialSummary}
          />
          <StripeVendorDashboard
            publishableKey={publishableKey}
            stripeConnected={stripeConnected}
            stripeAccountId={stripeAccountId}
          />
        </div>
      </VendorShell>
    </HydratedIsland>
  );
}