import React from 'react'
import { Text, StyleSheet, View } from 'react-native'
import { colors } from '../Colors'
import { TextStyles } from '../Styles'

const Styles = StyleSheet.create({
  container: {
    backgroundColor: colors.lightGray,
    borderRadius: 4,
    overflow: 'hidden',
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    paddingHorizontal: 6,
    marginRight: 8,
    marginTop: 3,
    minWidth: 21,
    height: 15,
  },
  text: {
    ...TextStyles.micro,
    color: colors.white,
    textAlign: 'center',
  },
})

interface RankProps {
  index: number
}

export const ListItemRank: React.FC<RankProps> = ({ index }) => {
  return (
    <View style={Styles.container}>
      <Text style={Styles.text} numberOfLines={1}>
        {index + 1}
      </Text>
    </View>
  )
}