import ImgTotalSvg from "@/assets/icons/svg/imgTotalWhite.svg";
import LiveTotalSvg from "@/assets/icons/svg/liveTotal.svg";
import PeopleSvg from "@/assets/icons/svg/people.svg";
import TimeTotalSvg from "@/assets/icons/svg/timeTotalWhite.svg";
import VideoTotalSvg from "@/assets/icons/svg/videoTotalWhite.svg";
import { BlurView } from "expo-blur";
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",
                    }}
                />
                <BlurView intensity={10} style={styles.overlay} />
            </View>
            <View style={styles.content}>
                {data.map((item, index) => (
                    <View style={styles.item} key={index}>
                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: index == 1 ? 12 : 16, flex: 3 }}>
                            <View>
                                {
                                    index == 0 ? <VideoTotalSvg width={20} height={20} /> : index == 1 ? <ImgTotalSvg width={24} height={24} /> : index == 2 ? <TimeTotalSvg width={20} height={20} /> : <LiveTotalSvg width={20} height={20} />
                                }
                            </View>
                            <ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
                        </View>
                        <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.4)',
        backdropFilter: 'blur(5px)',
    },
    content: {
        padding: 16,
        justifyContent: "space-between",
        flex: 1
    },
    titleContent: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        width: '100%',
    },
    title: {
        color: 'white',
        fontSize: 20,
        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',
        justifyContent: 'space-between',
        paddingVertical: 8,
        width: '100%',
    },
    itemTitle: {
        color: 'white',
        fontSize: 22,
        fontWeight: '700',
        marginLeft: 16,
        flex: 1,
    },
    itemNumber: {
        color: 'white',
        fontSize: 28,
        fontWeight: '700',
        textAlign: 'left',
        marginLeft: 8,
        flex: 1,
        paddingTop: 8
    }
});

export default CategoryComponent;