import PeopleSvg from "@/assets/icons/svg/people.svg";
import { Image, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import { ThemedText } from "../ThemedText";

interface CategoryProps {
    title: string;
    data: { title: string, number: string | number }[];
    bgSvg: string | null;
    style?: StyleProp<ViewStyle>;
}

const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
    return (
        <View style={[styles.container, style]}>
            <View style={styles.backgroundContainer}>
                <Image
                    source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/people.png')}
                    style={{
                        width: "100%",
                        height: "100%",
                        resizeMode: "cover"
                    }}
                />
                <View style={styles.overlay} />
            </View>
            <View style={styles.content}>
                {data.map((item, index) => (
                    <View style={styles.item} key={index}>
                        <ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
                        <ThemedText style={styles.itemNumber}>{item.number}</ThemedText>
                    </View>
                ))}
                <View style={styles.titleContent}>
                    <ThemedText style={styles.title}>{title}</ThemedText>
                    <PeopleSvg />
                </View>

            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        borderRadius: 32,
        overflow: 'hidden',
        position: 'relative',
        aspectRatio: 1,
    },
    backgroundContainer: {
        ...StyleSheet.absoluteFillObject,
        width: "100%",
        height: "100%",
    },
    overlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0, 0, 0, 0.2)', // 0% 不透明度的黑色
    },
    content: {
        paddingHorizontal: 40,
        paddingVertical: 24,
        justifyContent: 'flex-end',
        flex: 1
    },
    titleContent: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        width: '100%',
        marginTop: 16
    },
    title: {
        color: 'white',
        fontSize: 16,
        fontWeight: '700',
        textShadowColor: 'rgba(0, 0, 0, 0.5)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        position: 'absolute',
        textAlign: 'center',
        width: '100%',
        zIndex: 1,
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 8,
        justifyContent: 'space-between',
    },
    itemTitle: {
        color: 'white',
        fontSize: 14,
        fontWeight: '700',
    },
    itemNumber: {
        color: 'white',
        fontSize: 14,
    }
});

export default CategoryComponent;