import UserSvg from "@/assets/icons/svg/ataver.svg";
import FirstSvg from "@/assets/icons/svg/first.svg";
import SecondSvg from "@/assets/icons/svg/second.svg";
import ThirdSvg from "@/assets/icons/svg/third.svg";
import { RankingItem } from "@/types/user";
import { Image, StyleSheet, View } from "react-native";
import { ThemedText } from "../ThemedText";
interface IPodium {
    data: RankingItem[]
}
const PodiumComponent = ({ data }: IPodium) => {

    return (
        <View style={styles.container}>
            <View style={[styles.item, { opacity: data[1]?.user_id ? 1 : 0 }]}>
                <SecondSvg />
                <View style={[styles.titleContainer, { backgroundColor: '#FFB645', borderTopRightRadius: 0, height: 60 }]}>
                    {
                        data[1]?.user_avatar_url
                            ? <Image source={{ uri: data[1]?.user_avatar_url }} style={{ width: 30, height: 30, borderRadius: 30 }} />
                            : <UserSvg width={30} height={30} />
                    }
                    <ThemedText
                        numberOfLines={1}
                        ellipsizeMode="tail"
                        style={styles.title}
                    >
                        {data[1]?.user_nick_name}
                    </ThemedText>
                </View>
            </View>
            <View style={[styles.item, { marginHorizontal: -16, opacity: data[0]?.user_id ? 1 : 0 }]}>
                <FirstSvg />
                <View style={[styles.titleContainer, { backgroundColor: '#E2793F', height: 90 }]}>
                    {
                        data[0]?.user_avatar_url
                            ? <Image source={{ uri: data[0]?.user_avatar_url }} style={{ width: 40, height: 40, borderRadius: 40 }} />
                            : <UserSvg width={40} height={40} />
                    }
                    <ThemedText
                        numberOfLines={2}
                        ellipsizeMode="tail"
                        style={styles.title}
                    >
                        {data[0]?.user_nick_name}
                    </ThemedText>
                </View>
            </View>
            <View style={[styles.item, { opacity: data[2]?.user_id ? 1 : 0 }]}>
                <ThirdSvg />
                <View style={[styles.titleContainer, { backgroundColor: '#FFD18A', borderTopLeftRadius: 0, height: 50 }]}>
                    {
                        data[2]?.user_avatar_url
                            ? <Image source={{ uri: data[2]?.user_avatar_url }} style={{ width: 20, height: 20, borderRadius: 20 }} />
                            : <UserSvg width={20} height={20} />
                    }
                    <ThemedText
                        numberOfLines={1}
                        ellipsizeMode="tail"
                        style={styles.title}
                    >
                        {data[2]?.user_nick_name}
                    </ThemedText>
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'flex-end',
        justifyContent: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#B48C64',
    },
    item: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 12,
        fontWeight: '500',
        color: '#fff',
        textAlign: 'center',
        width: '100%',
        paddingHorizontal: 4
    },
    titleContainer: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-end',
        marginTop: -29,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        width: 95,
        paddingHorizontal: 4,
    }
});

export default PodiumComponent;