managarten/apps-archived/memoro/apps/mobile/features/subscription/PackageCard.tsx

import React from 'react';
import { View, Text } from 'react-native';
import { useTheme } from '../theme/ThemeProvider';
import { useTranslation } from 'react-i18next';
import SubscriptionButton from './SubscriptionButton';
import ManaIcon from './ManaIcon';
import colors from '~/tailwind.config.js';

export interface PackageProps {
	id: string;
	name: string;
	manaAmount: number;
	price: number;
	priceString: string;
	currencyCode: string;
	isTeamPackage?: boolean;
	isEnterprisePackage?: boolean;
	popular?: boolean;
}

interface PackageCardProps {
	package: PackageProps;
	onSelect: (packageId: string) => void;
}

export const PackageCard: React.FC<PackageCardProps> = ({ package: pkg, onSelect }) => {
	const { isDark, themeVariant, tw } = useTheme();
	const { t } = useTranslation();

	const formatPrice = (pkg: PackageProps) => {
		// Use priceString from RevenueCat if available, otherwise format the price
		return pkg.priceString || `${pkg.price.toFixed(2).replace('.', ',')}€`;
	};

	// Theme-aware colors using the same system as MemoPreview and SettingsToggle
	const themeColors = (colors as any).theme?.extend?.colors;
	const textColor = isDark ? '#FFFFFF' : '#000000';
	const secondaryTextColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.7)';
	const bgColor = isDark
		? themeColors?.dark?.[themeVariant]?.contentBackground || '#1E1E1E'
		: themeColors?.[themeVariant]?.contentBackground || '#FFFFFF';
	const borderColor = isDark
		? themeColors?.dark?.[themeVariant]?.border || '#424242'
		: themeColors?.[themeVariant]?.border || '#e6e6e6';
	const accentColor = '#4287f5'; // Konsistente Mana-Farbe für alle Abonnement-Komponenten
	const cardBgColor = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)';

	// Package-specific colors and background sizes (blue variants)
	const getPackageStyles = () => {
		switch (pkg.id) {
			case 'Mana_Potion_Small_v1':
				return { bg: '#E3F2FD', icon: '#2196F3', bgSize: '45%' }; // Light blue 50 / Blue 500
			case 'Mana_Potion_Medium_v1':
				return { bg: '#BBDEFB', icon: '#1976D2', bgSize: '60%' }; // Light blue 100 / Blue 700
			case 'Mana_Potion_Large_v1':
				return { bg: '#90CAF9', icon: '#1565C0', bgSize: '75%' }; // Light blue 200 / Blue 800
			case 'Mana_Potion_Giant_v2':
				return { bg: '#64B5F6', icon: '#0D47A1', bgSize: '90%' }; // Light blue 300 / Blue 900
			default:
				return { bg: '#E1F5FE', icon: '#0288D1', bgSize: '50%' };
		}
	};

	const packageStyles = getPackageStyles();

	return (
		<View
			style={{
				backgroundColor: bgColor,
				borderRadius: 12,
				padding: 16,
				borderWidth: 1,
				borderColor: pkg.popular ? accentColor : borderColor,
			}}
		>
			{pkg.popular && (
				<View
					style={{
						position: 'absolute',
						top: -10,
						right: 16,
						backgroundColor: accentColor,
						borderRadius: 12,
						paddingHorizontal: 10,
						paddingVertical: 4,
					}}
				>
					<Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold' as const }}>
						{t('subscription.popular', 'Popular')}
					</Text>
				</View>
			)}

			{/* Package Name - full width */}
			<Text
				style={{
					color: textColor,
					fontSize: 18,
					fontWeight: 'bold' as const,
					marginBottom: 16,
					textAlign: 'center',
				}}
			>
				{pkg.name}
			</Text>

			{/* Three column layout */}
			<View
				style={{
					flexDirection: 'row',
					justifyContent: 'space-between',
					alignItems: 'center',
					marginBottom: 20,
					gap: 8,
				}}
			>
				{/* Mana Icon with background */}
				<View
					style={{
						flex: 1,
						aspectRatio: 1,
						backgroundColor: cardBgColor,
						borderRadius: 12,
						justifyContent: 'center',
						alignItems: 'center',
						minHeight: 80,
					}}
				>
					{/* Inner container that grows */}
					<View
						style={{
							width: packageStyles.bgSize,
							height: packageStyles.bgSize,
							backgroundColor: packageStyles.bg,
							borderRadius: 8,
							justifyContent: 'center',
							alignItems: 'center',
						}}
					>
						<ManaIcon size={32} color={packageStyles.icon} />
					</View>
				</View>

				{/* Mana Amount */}
				<View
					style={{
						flex: 1,
						aspectRatio: 1,
						backgroundColor: cardBgColor,
						borderRadius: 12,
						justifyContent: 'center',
						alignItems: 'center',
						minHeight: 80,
					}}
				>
					<Text
						style={{
							color: textColor,
							fontSize: 24,
							fontWeight: 'bold' as const,
							marginBottom: 2,
						}}
					>
						{pkg.manaAmount}
					</Text>
					<Text
						style={{
							color: secondaryTextColor,
							fontSize: 11,
							textAlign: 'center',
						}}
					>
						{t('subscription.mana', 'Mana')}
					</Text>
				</View>

				{/* Price */}
				<View
					style={{
						flex: 1,
						aspectRatio: 1,
						backgroundColor: cardBgColor,
						borderRadius: 12,
						justifyContent: 'center',
						alignItems: 'center',
						minHeight: 80,
					}}
				>
					<Text
						style={{
							color: textColor,
							fontSize: 22,
							fontWeight: 'bold' as const,
						}}
					>
						{formatPrice(pkg)}
					</Text>
					<Text
						style={{
							color: secondaryTextColor,
							fontSize: 10,
							marginTop: 2,
						}}
					>
						{t('subscription.one_time', 'Einmalig')}
					</Text>
				</View>
			</View>

			<SubscriptionButton
				label={t('subscription.buy', 'Buy')}
				onPress={() => onSelect(pkg.id)}
				iconName="arrow-forward-outline"
				leftIconName="cart-outline"
				variant={pkg.popular ? 'accent' : 'primary'}
			/>
		</View>
	);
};

export default PackageCard;