import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import _ from 'lodash'

export const CarouselIndicator: React.FC<{
  count: number
  current: number
  containerStyle?: StyleProp<ViewStyle>
}> = ({ count, current, containerStyle }) => (
  <View
    style={[
      {
        flexDirection: 'row',
        justifyContent: 'center',
        paddingBottom: 12,
        paddingTop: 8,
      },
      containerStyle,
    ]}
  >
    {_.range(count).map((i) => (
      <View
        key={i}
        style={{
          width: 6,
          height: 6,
          borderRadius: 6,
          marginHorizontal: 3,
          backgroundColor: i === current ? 'white' : '#475060',
          opacity: count > 1 ? 1 : 0, // Reserve space, but don't display single dot
        }}
      />
    ))}
  </View>
)