import { FontAwesome } from '@expo/vector-icons';
import { FlatList, Text, View } from 'react-native';
import { Transaction } from '../types';

interface TransactionListProps {
    transactions: Transaction[];
    onDelete?: (id: number) => void;
}

export default function TransactionList({ transactions, onDelete }: TransactionListProps) {
    if (transactions.length === 0) {
        return (
            <View className="flex-1 justify-center items-center py-10">
                <Text className="text-gray-400 text-lg">No transactions yet</Text>
            </View>
        );
    }

    return (
        <FlatList
            data={transactions}
            keyExtractor={(item) => item.id.toString()}
            contentContainerStyle={{ paddingBottom: 20 }}
            renderItem={({ item }) => (
                <View className="bg-white dark:bg-gray-800 p-4 mb-3 rounded-2xl shadow-sm flex-row items-center justify-between">
                    <View className="flex-row items-center">
                        <View className={`w-10 h-10 rounded-full items-center justify-center mr-4 ${item.type === 'expense' ? 'bg-red-100' : 'bg-green-100'}`}>
                            <FontAwesome
                                name={item.type === 'expense' ? 'arrow-down' : 'arrow-up'}
                                size={16}
                                color={item.type === 'expense' ? '#EF4444' : '#10B981'}
                            />
                        </View>
                        <View>
                            <Text className="font-bold text-gray-900 dark:text-white text-base">{item.category}</Text>
                            <Text className="text-gray-500 text-xs">{item.date}</Text>
                        </View>
                    </View>
                    <View className="items-end">
                        <Text className={`font-bold text-base ${item.type === 'expense' ? 'text-red-500' : 'text-green-500'}`}>
                            {item.type === 'expense' ? '-' : '+'}€{item.amount.toFixed(2)}
                        </Text>
                        {item.description && (
                            <Text className="text-gray-400 text-xs max-w-[100px]" numberOfLines={1}>{item.description}</Text>
                        )}
                    </View>
                </View>
            )}
        />
    );
}