hold my beer des wird a katastrophe

components/stats/BudgetRemaining.tsx

@@ -5,15 +5,33 @@ import useFetch from '../../hooks/useFetch';
 import { CategoryType } from '../../services/database';
 
 const styles = StyleSheet.create({
+    container: {
+        margin: 10,
+        borderRadius: 5,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
     text: {
         fontSize: 26,
     },
     boldText: {
-        fontWeight: 'bold',
+        fontWeight: 'bold'
+    },
+    negativeText: {
+        color: 'red',
+    },
+    positiveText: {
+        color: 'green',
     },
 });
 
-const BudgetRemaining = () => {
+
+interface BudgetRemainingProps {
+    goodColor?: string;
+    badColor?: string;
+}
+
+const BudgetRemaining: React.FC<BudgetRemainingProps> = ({ goodColor = 'green', badColor = 'red' }) => {
     const { colors } = useTheme();
     const [spent, setSpent] = useState(0);
     const [budget, setBudget] = useState(0);
@@ -47,10 +65,18 @@ const BudgetRemaining = () => {
     }
 
     return (
-        <Text style={[styles.text, {color: colors.primaryText}]}>
-            You have <Text style={styles.boldText}>{remaining.toFixed(2)}€</Text> left.
+        <Text style={[styles.text, { color: colors.primaryText }]}>
+            {remaining >= 0 ? (
+                <>
+                    Your remaining Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}</Text>€.
+                </>
+            ) : (
+                <>
+                    Your Budget is overspent by by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}</Text>€.
+                </>
+            )}
         </Text>
-    );
+    );    
 };
 
 export default BudgetRemaining;