'use client';

import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
import type { LeagueWalletViewData } from '@/lib/view-data/LeagueWalletViewData';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Download } from 'lucide-react';

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

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

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

        {/* Alpha Notice */}
        <Box mt={6} rounded="lg" bg="rgba(245,158,11,0.1)" border borderColor="rgba(245,158,11,0.3)" p={4}>
          <Text size="xs" color="text-gray-400">
            <Text weight="bold" color="warning-amber">Alpha Note:</Text> Wallet management is demonstration-only.
            Real payment processing and bank integrations will be available when the payment system is fully implemented.
          </Text>
        </Box>
      </Box>
    </Container>
  );
}