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

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

const BudgetRemaining: React.FC<BudgetRemainingProps> = ({ budget, spent }) => {
    const { colors, theme } = useTheme();

    const remaining = budget - spent;

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

    return (
        <Text style={styles.text}>
            You have <Text style={styles.boldText}>{remaining.toFixed(2)}€</Text> left.
        </Text>
    );
};

export default BudgetRemaining;