import React from 'react';
import { View } from 'react-native';
import Text from './text';

interface PageIndicatorProps {
  current: number;
  total: number;
}

const PageIndicator = ({ current, total }: PageIndicatorProps) => {
  return (
    <View className="flex-row gap-[2px] rounded-[6px] bg-[#03071280] px-[8px] py-[4px]">
      <Text
        face={'caption'}
        weight={'semibold'}
        size={'medium'}
        textColor="white"
      >
        {current}
      </Text>
      <Text
        face={'caption'}
        weight={'semibold'}
        size={'medium'}
        textColor={'rgba(255, 255, 255, 0.5)'}
      >
        /
      </Text>
      <Text
        face={'caption'}
        weight={'semibold'}
        size={'medium'}
        textColor={'rgba(255, 255, 255, 0.5)'}
      >
        {total}
      </Text>
    </View>
  );
};

export default PageIndicator;