/**
 * BlockIndicator — Shows multi-block progress (e.g., "Block 2/3")
 */

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { GREEN, TEXT } from '@/src/shared/constants/colors'
import { FONT_FAMILY } from '@/src/shared/constants/typography'
import { SPACING, RADIUS } from '@/src/shared/constants'

interface BlockIndicatorProps {
  currentBlock: number // 0-based
  totalBlocks: number
  accentColor?: string
}

export function BlockIndicator({ currentBlock, totalBlocks, accentColor = GREEN[500] }: BlockIndicatorProps) {
  if (totalBlocks <= 1) return null

  return (
    <View style={styles.container}>
      <Text style={styles.label}>
        Bloc {currentBlock + 1}/{totalBlocks}
      </Text>
      <View style={styles.dots}>
        {Array.from({ length: totalBlocks }).map((_, i) => (
          <View
            key={i}
            style={[
              styles.dot,
              {
                backgroundColor: i < currentBlock
                  ? GREEN[500]
                  : i === currentBlock
                    ? accentColor
                    : TEXT.TERTIARY,
              },
            ]}
          />
        ))}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: SPACING[2],
  },
  label: {
    fontFamily: FONT_FAMILY.SANS_SEMIBOLD,
    fontSize: 14,
    color: TEXT.SECONDARY,
  },
  dots: {
    flexDirection: 'row',
    gap: SPACING[1],
  },
  dot: {
    width: SPACING[2],
    height: SPACING[2],
    borderRadius: RADIUS.FULL,
  },
})
