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}>
            <View style={styles.header}>
                <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
                <View className="mt-1">
                    {props.icon}
                </View>
            </View>
            <ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        justifyContent: "space-between",
        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",
        gap: 8,
        // 靠左展示
        textAlign: 'left',
    },
    title: {
        width: "53%",
        fontSize: 11,
        fontWeight: "700",
        // 允许换行
        flexWrap: "wrap",
    },
    number: {
        fontSize: 32,
        fontWeight: "700",
        paddingTop: 8,
        width: "100%",
        // 靠右展示
        textAlign: "right",
    },
})
export default CreateCountComponent;