'use client';

import React from 'react';
import { ArrowUpRight, ArrowDownRight, DollarSign, TrendingUp, LucideIcon } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';

interface Transaction {
  id: string;
  type: string;
  description: string;
  formattedDate: string;
  formattedAmount: string;
  typeColor: string;
  status: string;
  statusColor: string;
  amountColor: string;
}

interface TransactionRowProps {
  transaction: Transaction;
}

export function TransactionRow({ transaction }: TransactionRowProps) {
  const getTransactionIcon = (type: string): LucideIcon => {
    switch (type) {
      case 'deposit': return ArrowUpRight;
      case 'withdrawal': return ArrowDownRight;
      case 'sponsorship': return DollarSign;
      case 'prize': return TrendingUp;
      default: return DollarSign;
    }
  };

  return (
    <Surface
      variant="muted"
      rounded="lg"
      border
      padding={4}
      bg="bg-iron-gray/30"
      borderColor="border-charcoal-outline"
    >
      <Stack direction="row" align="center" justify="between">
        <Stack direction="row" align="center" gap={3}>
          <Box flexShrink={0}>
            <Icon icon={getTransactionIcon(transaction.type)} size={4} color={transaction.typeColor} />
          </Box>
          <Box minWidth="0" flexGrow={1}>
            <Text size="sm" weight="medium" color="text-white" block truncate>
              {transaction.description}
            </Text>
            <Stack direction="row" align="center" gap={2} mt={1}>
              <Text size="xs" color="text-gray-500">{transaction.formattedDate}</Text>
              <Text size="xs" color="text-gray-500">•</Text>
              <Text size="xs" color={transaction.typeColor} transform="capitalize">
                {transaction.type}
              </Text>
              <Text size="xs" color="text-gray-500">•</Text>
              <Text size="xs" color={transaction.statusColor} transform="capitalize">
                {transaction.status}
              </Text>
            </Stack>
          </Box>
        </Stack>

        <Box textAlign="right">
          <Text size="lg" weight="semibold" color={transaction.amountColor}>
            {transaction.formattedAmount}
          </Text>
        </Box>
      </Stack>
    </Surface>
  );
}