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/animals.png')}
                    style={{ width: '100%', height: '100%' }}
                    resizeMode="cover"
                />
                <View style={styles.overlay} />
            </View>
            <View style={styles.content}>
                <ThemedText style={styles.title}>{title}</ThemedText>
                {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>
        </View>
    );
};

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

export default CategoryComponent;