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

interface CreateCountProps {
    title: string;
    icon: React.ReactNode;
    number: number;
    style?: StyleProp<ViewStyle>;
}
const CreateCountComponent = (props: CreateCountProps) => {
    return (
        <View style={styles.container}>
            <ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
            <View style={styles.header}>
                <View className="mt-1">
                    {props.icon}
                </View>
                <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 8,
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 12,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    header: {
        width: "100%",
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        gap: 8,
    },
    title: {
        fontSize: 20,
        fontWeight: "700",
        // 允许换行
        flexWrap: "wrap",
    },
    number: {
        fontSize: 32,
        fontWeight: "400",
        paddingTop: 8,
        width: "100%",
        textAlign: "center",
        color: "#4C320C"
    },
})
export default CreateCountComponent;