import HandersSvg from '@/assets/icons/svg/handers.svg';
import ProSvg from '@/assets/icons/svg/pro.svg';
import { ThemedText } from '@/components/ThemedText';
import { useRouter } from 'expo-router';
import { useTranslation } from "react-i18next";
import { Dimensions, Image, StyleSheet, TouchableOpacity, View } from "react-native";

const MemberCard = ({ pro }: { pro: string }) => {
    const { t } = useTranslation();
    const proPng = require("@/assets/images/png/owner/pro.png");
    const width = Dimensions.get("window").width;
    const router = useRouter();

    return (
        <View style={styles.container}>
            <Image source={proPng} style={{ opacity: pro === "Pro" ? 1 : 0.5, width: 330, height: 110, position: "absolute", left: width * 0.5 - 40, bottom: 0, zIndex: 9 }} />
            <ProSvg width={"100%"} height={"100%"} style={{ opacity: pro === "Pro" ? 1 : 0.5, backgroundColor: '#4C320C', borderRadius: 32 }} />
            <HandersSvg style={{ opacity: pro === "Pro" ? 1 : 0.5, position: "absolute", left: width * 0.5 + 5, bottom: -3, zIndex: 10 }} />
            <View style={[styles.dateContainer, { opacity: pro === "Pro" ? 1 : 0.5 }]}>
                <ThemedText style={styles.date}>2025-09-05截止</ThemedText>
            </View>

            {
                pro === "Pro"
                    ?
                    null :
                    <TouchableOpacity
                        onPress={() => {
                            router.push('/rights');
                        }}
                        activeOpacity={0.7}
                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                        style={styles.proText}
                    >
                        <ThemedText >{t("personal:generalSetting.goPremium")}</ThemedText>
                    </TouchableOpacity>
            }


        </View>
    );
};

const styles = StyleSheet.create({
    proText: {
        fontSize: 10,
        fontWeight: 'bold',
        color: '#4C320C',
        padding: 4,
        paddingHorizontal: 8,
        borderRadius: 16,
        backgroundColor: '#fff',
        position: 'absolute',
        top: 30,
        left: 90,
        opacity: 0.7
    },
    dateContainer: {
        position: 'absolute',
        top: 16,
        right: -15,
        zIndex: 1,
        transform: [{ rotate: '40deg' }],
    },
    date: {
        fontSize: 11,
        fontWeight: 'bold',
        color: '#4C320C',
        padding: 4,
    },
    container: {
        position: "relative",
        height: 120
    },
});

export default MemberCard;