managarten/apps-archived/maerchenzauber/apps/mobile/components/molecules/ManaCounter.tsx

import React from 'react';
import { StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
import { useRouter } from 'expo-router';
import Text from '../atoms/Text';
import { useManaBalance } from '../../hooks/useManaBalance';
import ManaIcon from '../icons/ManaIcon';

interface ManaCounterProps {
	onPress?: () => void;
	size?: 'small' | 'medium' | 'large';
}

export default function ManaCounter({ onPress, size = 'medium' }: ManaCounterProps) {
	const router = useRouter();
	const { manaBalance, loading } = useManaBalance();

	const handlePress = () => {
		if (onPress) {
			onPress();
		} else {
			router.push('/subscription');
		}
	};

	const formatManaBalance = (balance: number | null): string => {
		if (balance === null) return '0';
		if (balance >= 10000) {
			return `${Math.floor(balance / 1000)}K`;
		}
		return balance.toString();
	};

	const sizeConfig = {
		small: {
			iconSize: 16,
			fontSize: 13,
			paddingVertical: 6,
			paddingLeft: 6,
			paddingRight: 12,
			minWidth: 60,
		},
		medium: {
			iconSize: 22,
			fontSize: 16,
			paddingVertical: 8,
			paddingLeft: 8,
			paddingRight: 16,
			minWidth: 70,
		},
		large: {
			iconSize: 26,
			fontSize: 20,
			paddingVertical: 10,
			paddingLeft: 10,
			paddingRight: 18,
			minWidth: 80,
		},
	};

	const config = sizeConfig[size];

	return (
		<TouchableOpacity
			onPress={handlePress}
			style={[
				styles.container,
				{
					paddingVertical: config.paddingVertical,
					paddingLeft: config.paddingLeft,
					paddingRight: config.paddingRight,
					minWidth: config.minWidth,
				},
			]}
			hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
		>
			<ManaIcon size={config.iconSize} color="#4A9EFF" />
			{loading ? (
				<ActivityIndicator size="small" color="#4A9EFF" />
			) : (
				<Text style={[styles.balance, { fontSize: config.fontSize }]}>
					{formatManaBalance(manaBalance)}
				</Text>
			)}
		</TouchableOpacity>
	);
}

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		alignItems: 'center',
		gap: 3,
		backgroundColor: 'rgba(74, 158, 255, 0.15)',
		borderRadius: 20,
	},
	balance: {
		fontWeight: '700',
		color: '#4A9EFF',
		minWidth: 20,
	},
});