import ProTextSvg from '@/assets/icons/svg/proText.svg';
import GradientText from '@/components/textLinear';
import { useRouter } from 'expo-router';
import { useTranslation } from "react-i18next";
import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
import CardBg from './cardBg';
import IpSvg from './ipSvg';

const MemberCard = ({ pro, points }: { pro: string, points: number }) => {
    const { t } = useTranslation();
    const width = Dimensions.get("window").width;
    const router = useRouter();

    return (
        <TouchableOpacity style={[styles.container]} onPress={() => router.push({
            pathname: '/rights',
            params: {
                points: points,
                pro: pro
            }
        })}>
            {/* 背景图 */}
            <View style={[styles.cardBg, { opacity: pro === "pro" ? 1 : 0.5 }]}>
                <CardBg pro={pro} date={"2025-09-05"} />
            </View>
            {/* pro标志 */}
            <View style={[styles.proTextContainer, { left: width * 0.08, top: width * 0.07 }]}>
                <ProTextSvg />
            </View>
            {/* 背景板ip */}
            <View style={[styles.ipContainer, { opacity: pro === "pro" ? 1 : 0.5 }]}>
                <IpSvg pro={pro} />
            </View>
            {/* 会员标识 */}
            {/* <View style={[styles.memberContainer, { left: width * 0.25, top: width * 0.1, opacity: 1 }]}>
                <MemberBgSvg />
                <ThemedText style={{ fontSize: 12, color: "#2D3D60", position: "absolute", left: 0, top: 0, bottom: 0, right: 0, textAlign: "center", textAlignVertical: "center" }}>{t("personal:member.goPremium")}</ThemedText>
            </View> */}
            {/* 解锁更多魔法 */}
            <View style={{ position: "absolute", bottom: width * 0.05, left: -width * 0.12, opacity: pro === "pro" ? 1 : 0.5, flexWrap: "wrap" }}>
                <GradientText
                    text={t("personal:member.unlock")}
                    fontSize={16}
                    lineHeight={1.5}
                    color={[
                        { offset: "0%", color: "#D0BFB0" },
                        { offset: "32.89%", color: "#FFE57D" },
                        { offset: "81.1%", color: "#FFFFFF" }
                    ]}
                />
            </View>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    container: {
        position: "relative"
    },
    memberContainer: {
        position: "absolute",
        backgroundColor: "linear-gradient(97.5deg, #FFF3E8 7.16%, #FFFAB9 100.47%)",
        borderRadius: 13.1348,
    },
    proTextContainer: {
        position: "absolute",
        zIndex: 9,
    },
    ipContainer: {
        position: "absolute",
        bottom: 0,
        right: 0,
        zIndex: 9
    },
    cardBg: {
        width: "100%",
        alignSelf: "center",
        position: "relative",
        marginRight: 10,
        zIndex: -1,
    },
    dateContainer: {
        position: 'absolute',
        zIndex: 10,
        alignItems: 'flex-end',
        transform: [
            { rotate: '400deg' }
        ],
    },
});

export default MemberCard;