import type { RankingItem } from '@/store/challengesSlice';
import { Ionicons } from '@expo/vector-icons';
import { Image } from 'expo-image';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

type ChallengeRankingItemProps = {
  item: RankingItem;
  index: number;
  showDivider?: boolean;
};

export function ChallengeRankingItem({ item, index, showDivider = false }: ChallengeRankingItemProps) {
  return (
    <View style={[styles.rankingRow, showDivider && styles.rankingRowDivider]}>
      <View style={styles.rankingOrderCircle}>
        <Text style={styles.rankingOrder}>{index + 1}</Text>
      </View>
      {item.avatar ? (
        <Image source={{ uri: item.avatar }} style={styles.rankingAvatar} cachePolicy="memory-disk" />
      ) : (
        <View style={styles.rankingAvatarPlaceholder}>
          <Ionicons name="person-outline" size={20} color="#6f7ba7" />
        </View>
      )}
      <View style={styles.rankingInfo}>
        <Text style={styles.rankingName} numberOfLines={1}>
          {item.name}
        </Text>
        <Text style={styles.rankingMetric}>{item.metric}</Text>
      </View>
      {item.badge ? <Text style={styles.rankingBadge}>{item.badge}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  rankingRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 18,
  },
  rankingRowDivider: {
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#E5E7FF',
  },
  rankingOrderCircle: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#EEF0FF',
    marginRight: 12,
  },
  rankingOrder: {
    fontSize: 15,
    fontWeight: '700',
    color: '#4F5BD5',
  },
  rankingAvatar: {
    width: 44,
    height: 44,
    borderRadius: 22,
    marginRight: 14,
    backgroundColor: '#EEF0FF',
  },
  rankingAvatarPlaceholder: {
    width: 44,
    height: 44,
    borderRadius: 22,
    marginRight: 14,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#EEF0FF',
  },
  rankingInfo: {
    flex: 1,
  },
  rankingName: {
    fontSize: 15,
    fontWeight: '700',
    color: '#1c1f3a',
  },
  rankingMetric: {
    marginTop: 4,
    fontSize: 13,
    color: '#6f7ba7',
  },
  rankingBadge: {
    fontSize: 12,
    color: '#A67CFF',
    fontWeight: '700',
  },
});