import React, { FC, useContext } from 'react';
import { View } from 'react-native';
import { ChildPaginationProps } from './types';
import styles from './styles';
import { Text } from '../Text';
import { Colors } from '../Consts';
import { MiniAppContext } from '../Context';

const PaginationNumber: FC<ChildPaginationProps> = ({
  activeIndex = 0,
  dataLength = 2,
  style,
}) => {
  const context = useContext<any>(MiniAppContext);

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  return (
    <View
      style={[style, styles.row, showBaseLineDebug && styles.debugBaseLine]}
    >
      <View style={styles.paginationNumberContainer}>
        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
          activeIndex + 1
        }/${dataLength}`}</Text>
      </View>
    </View>
  );
};

export default PaginationNumber;