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

interface CreateCountProps {
    title: string;
    icon: React.ReactNode;
    number: number;
    style?: StyleProp<ViewStyle>;
}

// 使用React.memo优化组件，避免不必要的重渲染
const CreateCountComponent = React.memo((props: CreateCountProps) => {
    // 预计算样式以提高性能
    const containerStyle = useMemo(() => [
        styles.container,
        props.style
    ], [props.style]);

    return (
        <View style={containerStyle}>
            <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: 1,
    },
    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;