import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import { ThemedText } from "../ThemedText";

interface CountProps {
    data: { title: string; number: string | number }[];
    style?: StyleProp<ViewStyle>;
}
const CountComponent = (props: CountProps) => {
    return (
        <View style={[styles.container, props.style]}>
            {props.data?.map((item, index) => (
                <View style={styles.item} key={index}>
                    <ThemedText style={styles.title}>{item.title}</ThemedText>
                    <ThemedText style={styles.number}>{item.number}</ThemedText>
                </View>
            ))}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#FFB645",
        padding: 16,
        borderRadius: 20,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
    },
    item: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingVertical: 8
    },
    title: {
        color: "#4C320C",
        fontWeight: "700",
        fontSize: 14,
    },
    number: {
        color: "#fff",
        fontWeight: "700",
        fontSize: 32,
        textAlign: 'right',
        flex: 1,
        paddingTop: 8
    }
})
export default CountComponent;