crazycharge-app/component/global/PaginationIndicator.tsx

import React from "react";
import { View, StyleSheet } from "react-native";

const Circle = ({ isActive }: { isActive: boolean }) => {
	return <View style={isActive ? styles.activeCircle : styles.circle} />;
};

const PaginationIndicator = ({ totalPages, currentPage }: { totalPages: number; currentPage: number }) => {
	return (
		<View style={styles.container}>
			{Array.from({ length: totalPages }, (_, index) => (
				<Circle key={index} isActive={index === currentPage} />
			))}
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flexDirection: "row",
		justifyContent: "center",
		alignItems: "center",
	},
	circle: {
		width: 16,
		height: 16,
		borderRadius: 10,
		backgroundColor: "#D9D9D9",
		margin: 5,
	},
	activeCircle: {
		width: 16,
		height: 16,
		borderRadius: 10,
		backgroundColor: "#02677D",
		margin: 5,
	},
});

export default PaginationIndicator;