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

interface CategoryProgressBarProps {
    categoryName: string;
    color?: string;
    maxValue: number;
    currentValue: number;
}

const CategoryProgressBar: React.FC<CategoryProgressBarProps> = ({
    categoryName,
    color,
    maxValue,
    currentValue,
}) => {
    const { colors } = useTheme();

    const progress = (currentValue / maxValue) * 100;
    const progressText = `${currentValue}€ / ${maxValue}€`;

    const dynamicStyles = StyleSheet.create({
        progressBarFill: {
            height: '100%',
            width: `${progress}%`,
            backgroundColor: color || colors.accentColor,
            alignItems: 'center',
            justifyContent: 'center',
        },
        progressText: {
            color: colors.primaryText,
            fontSize: 20,
            fontWeight: 'bold',
        },
    });

    const styles = StyleSheet.create({
        container: {
            padding: 10,
        },
        progressBarContainer: {
            flexDirection: 'row',
            height: 50,
            backgroundColor: colors.elementSelectedColor,
            borderRadius: 15,
            overflow: 'hidden',
            marginTop: 4,
        },
        categoryName: {
            color: colors.primaryText,
            fontSize: 20,
            fontWeight: 'bold',
        },
    });

    return (
        <View style={styles.container}>
            <Text style={styles.categoryName}>{categoryName}</Text>
            <View style={styles.progressBarContainer}>
                <View style={dynamicStyles.progressBarFill}>
                    <Text style={dynamicStyles.progressText}>{progressText}</Text>
                </View>
            </View>
        </View>
    );
};

export default CategoryProgressBar;