'use client';

import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
import { 
  SharedBox, 
  SharedButton, 
  SharedStack, 
  SharedText, 
  SharedIcon,
  SharedContainer
} from '@/components/shared/UIComponents';
import { Heading } from '@/ui/Heading';
import { Download } from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';

interface LeagueWalletTemplateProps extends TemplateProps<LeagueWalletViewData> {
  onWithdraw?: (amount: number) => void;
  onExport?: () => void;
  mutationLoading?: boolean;
  transactions: any[];
}

export function LeagueWalletTemplate({ viewData, onExport, transactions }: LeagueWalletTemplateProps) {
  return (
    <SharedContainer size="lg">
      <SharedBox paddingY={8}>
        {/* Header */}
        <SharedBox display="flex" alignItems="center" justifyContent="between" mb={8}>
          <SharedBox>
            <Heading level={1}>League Wallet</Heading>
            <SharedText color="text-gray-400">Manage your league's finances and payouts</SharedText>
          </SharedBox>
          <SharedButton variant="secondary" onClick={onExport}>
            <SharedStack direction="row" align="center" gap={2}>
              <SharedIcon icon={Download} size={4} />
              <SharedText>Export</SharedText>
            </SharedStack>
          </SharedButton>
        </SharedBox>

        <WalletSummaryPanel 
          formattedBalance={viewData.formattedBalance}
          currency="USD"
          transactions={viewData.transactions}
          onDeposit={() => {}} // Not implemented for leagues yet
          onWithdraw={() => {}} // Not implemented for leagues yet
        />

        {/* Alpha Notice */}
        <SharedBox mt={6} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
          <SharedText size="xs" color="text-gray-400">
            <SharedText weight="bold" color="text-warning-amber">Alpha Note:</SharedText> Wallet management is demonstration-only.
            Real payment processing and bank integrations will be available when the payment system is fully implemented.
          </SharedText>
        </SharedBox>
      </SharedBox>
    </SharedContainer>
  );
}