import RightArrowSvg from "@/assets/icons/svg/rightArrow.svg";
import { TitleRankings } from "@/types/user";
import { useRouter } from "expo-router";
import { useTranslation } from "react-i18next";
import { FlatList, StyleSheet, TouchableOpacity, View } from "react-native";
import { ThemedText } from "../ThemedText";

const Ranking = ({ data }: { data: TitleRankings[] }) => {
    const router = useRouter();
    const { t } = useTranslation();

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <TouchableOpacity style={styles.headerItem} onPress={() => {
                    router.push('/top')
                }}>
                    <ThemedText style={styles.headerTitle}>{t('generalSetting.rank', { ns: 'personal' })}</ThemedText>
                    <RightArrowSvg />
                </TouchableOpacity>
            </View>
            <FlatList
                data={data}
                showsVerticalScrollIndicator={false}
                contentContainerStyle={{ width: "100%" }}
                keyExtractor={(item, index) => `${item.display_name}-${index}`}
                renderItem={({ item }) => (
                    <View style={styles.item}>
                        <ThemedText style={styles.rank}>No.{item.ranking}</ThemedText>
                        <ThemedText style={styles.title}>{item.region}{item.display_name}</ThemedText>
                    </View>
                )}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: "column",
        justifyContent: "space-between",
        gap: 8,
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 12,
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    header: {
        flex: 1,
        width: "100%",
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    headerItem: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
    },
    headerTitle: {
        fontSize: 14,
        fontWeight: '700',
        color: '#4C320C',
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        width: "100%",
        paddingVertical: 8, // 建议加行高
        justifyContent: 'space-between',
    },
    rank: {
        fontSize: 20,
        fontWeight: '700',
        color: '#4C320C',
        minWidth: 80, // 新增
    },
    title: {
        fontSize: 16,
        fontWeight: '700',
        color: '#4C320C',
        marginHorizontal: 8, // 新增
    },
    number: {
        fontSize: 16,
        fontWeight: '700',
        color: '#AC7E35',
        minWidth: 60, // 新增
        textAlign: 'right'
    },
});

export default Ranking;