import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '../../app/contexts/ThemeContext';

interface StatsBudgetProps {
    spent: number;
    budget: number;
}

const BudgetOverview: React.FC<StatsBudgetProps> = ({ spent, budget }) => {
    const { colors } = useTheme();

    const styles = StyleSheet.create({
        container: {
            margin: 10,
            borderRadius: 5,
            alignItems: 'center',
            justifyContent: 'center',
        },
        text: {
            fontSize: 26,
            color: colors.primaryText,
        },
        boldText: {
            fontWeight: 'bold',
        },
    });

    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                You have spent <Text style={styles.boldText}>{spent.toFixed(2)}€</Text> out of your budget of <Text style={styles.boldText}>{budget.toFixed(2)}€</Text>.
            </Text>
        </View>
    );
};

export default BudgetOverview