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}>
            <View style={styles.header}>
                <ThemedText type="sfPro" weight="bold" color="textSecondary" size="xxs" style={{ lineHeight: 16 }}>{props.title}</ThemedText>
                {props.icon}
            </View>
            <ThemedText weight="bold" color="textSecondary" size="title" style={{ lineHeight: 36, textAlign: "right" }}>{props.number}</ThemedText>
        </View>
    );
});

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

export default CreateCountComponent;
