everything refactored

components/stats/BudgetRemaining.tsx

@@ -0,0 +1,38 @@
+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;