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

import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import Text from '../atoms/Text';

interface PremiumCuddlyToyCardProps {
	onPress: () => void;
}

export default function PremiumCuddlyToyCard({ onPress }: PremiumCuddlyToyCardProps) {
	return (
		<View style={styles.container}>
			<TouchableOpacity onPress={onPress} activeOpacity={0.9}>
				<LinearGradient
					colors={['#FFD700', '#FFA500', '#FF8C00']}
					start={{ x: 0, y: 0 }}
					end={{ x: 1, y: 1 }}
					style={styles.gradientBackground}
				>
					{/* Sparkle decorations */}
					<View style={styles.sparkleTopRight}>
						<MaterialCommunityIcons
							name="star-four-points"
							size={16}
							color="rgba(255, 255, 255, 0.6)"
						/>
					</View>
					<View style={styles.sparkleBottomLeft}>
						<MaterialCommunityIcons
							name="star-four-points"
							size={12}
							color="rgba(255, 255, 255, 0.4)"
						/>
					</View>

					<View style={styles.contentRow}>
						<View style={styles.textContainer}>
							<View style={styles.badge}>
								<Text style={styles.badgeText}>NEU</Text>
							</View>
							<Text style={styles.title}>Kuscheltier zum Leben erwecken</Text>
							<Text style={styles.subtitle}>
								Verwandle das Kuscheltier deines Kindes in einen magischen Charakter
							</Text>
						</View>

						<View style={styles.iconContainer}>
							<MaterialCommunityIcons name="teddy-bear" size={36} color="#000000" />
						</View>
					</View>
				</LinearGradient>
			</TouchableOpacity>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		width: '100%',
		marginBottom: 24,
		borderRadius: 16,
		overflow: 'hidden',
		shadowColor: '#FFD700',
		shadowOffset: { width: 0, height: 4 },
		shadowOpacity: 0.3,
		shadowRadius: 12,
		elevation: 8,
	},
	gradientBackground: {
		padding: 20,
		position: 'relative',
		overflow: 'hidden',
		// Use alignSelf: 'stretch' instead of width: '100%' to prevent CoreGraphics crashes
		alignSelf: 'stretch',
		justifyContent: 'center',
		alignItems: 'center',
		minWidth: 200, // Ensure CoreGraphics has valid dimensions
	},
	sparkleTopRight: {
		position: 'absolute',
		top: 16,
		right: 16,
		opacity: 0.6,
	},
	sparkleBottomLeft: {
		position: 'absolute',
		bottom: 16,
		left: 16,
		opacity: 0.4,
	},
	contentRow: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	textContainer: {
		flex: 1,
		marginRight: 16,
	},
	badge: {
		backgroundColor: 'rgba(0, 0, 0, 0.3)',
		paddingHorizontal: 12,
		paddingVertical: 4,
		borderRadius: 12,
		alignSelf: 'flex-start',
		marginBottom: 8,
	},
	badgeText: {
		color: '#FFFFFF',
		fontSize: 12,
		fontWeight: '700',
		letterSpacing: 1,
	},
	title: {
		fontSize: 20,
		fontWeight: '700',
		color: '#000000',
		marginBottom: 4,
		fontFamily: 'Grandstander_700Bold',
	},
	subtitle: {
		fontSize: 14,
		color: 'rgba(0, 0, 0, 0.8)',
		lineHeight: 20,
	},
	iconContainer: {
		width: 60,
		height: 60,
		borderRadius: 30,
		backgroundColor: 'rgba(255, 255, 255, 0.3)',
		justifyContent: 'center',
		alignItems: 'center',
	},
});