/**
 * RoundIndicator — Shows current round out of total
 */

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { useTranslation } from 'react-i18next'

import { darkColors } from '@/src/shared/theme'
import { TYPOGRAPHY, FONT_FAMILY_SANS_BOLD } from '@/src/shared/constants/typography'
import { SPACING } from '@/src/shared/constants/spacing'

interface RoundIndicatorProps {
  current: number
  total: number
}

export function RoundIndicator({ current, total }: RoundIndicatorProps) {
  const { t } = useTranslation()
  const colors = darkColors

  return (
    <View style={styles.container}>
      <Text style={[styles.text, { color: colors.text.tertiary }]}>
        {t('screens:player.round')}{' '}
        <Text style={[styles.current, { color: colors.text.primary }]}>{current}</Text>
        /{total}
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    marginTop: SPACING[2],
  },
  text: {
    ...TYPOGRAPHY.BODY,
  },
  current: {
    fontFamily: FONT_FAMILY_SANS_BOLD,
    fontVariant: ['tabular-nums'],
  },
})
