'use client';

import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
import type { LeagueWalletViewData } from '@/lib/view-data/LeagueWalletViewData';
import { LeagueWalletTemplate } from '@/templates/LeagueWalletTemplate';

interface LeagueWalletPageClientProps extends ClientWrapperProps<LeagueWalletViewData> {
  onWithdraw?: (amount: number) => void;
  onExport?: () => void;
  mutationLoading?: boolean;
}

export function LeagueWalletPageClient({ viewData, onExport }: LeagueWalletPageClientProps) {
  // Map transactions to the format expected by WalletSummaryPanel
  const transactions = viewData.transactions.map(t => ({
    id: t.id,
    type: t.type === 'withdrawal' ? 'debit' : 'credit' as 'credit' | 'debit',
    amount: parseFloat(t.formattedAmount.replace(/[^0-9.-]+/g, '')),
    description: t.description,
    date: t.formattedDate,
  }));

  return (
    <LeagueWalletTemplate
      viewData={viewData}
      onExport={onExport}
      transactions={transactions}
    />
  );
}