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

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import { Image } from 'expo-image';
import { Blurhash } from 'react-native-blurhash';
import Text from '../atoms/Text';
import Icon from '../atoms/Icon';
import { LinearGradient } from 'expo-linear-gradient';

interface CharacterCardProps {
	character: {
		id: string;
		name: string;
		original_description?: string;
		image_url?: string;
		total_vote_score?: number;
		stories_count?: number;
		share_code?: string;
		sharing_preference?: string;
	};
	onPress?: () => void;
	onVote?: (voteType: 'like' | 'love' | 'star') => void;
	onClone?: () => void;
	showVoteCount?: boolean;
	voteCount?: number;
	showCloneButton?: boolean;
	style?: any;
}

export default function CharacterCard({
	character,
	onPress,
	onVote,
	onClone,
	showVoteCount = false,
	voteCount = 0,
	showCloneButton = false,
	style,
}: CharacterCardProps) {
	const cardWidth = style?.width || 160;
	const cardHeight = cardWidth * 1.3;
	const [imageLoaded, setImageLoaded] = useState(false);

	const blurHash = (character as any).blur_hash || 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';

	return (
		<TouchableOpacity
			style={[styles.container, style, { height: cardHeight }]}
			onPress={onPress}
			activeOpacity={0.8}
		>
			<View style={styles.imageContainer}>
				{character.image_url ? (
					<>
						{/* BlurHash Placeholder */}
						{!imageLoaded && (
							<Blurhash blurhash={blurHash} style={styles.blurHashPlaceholder} resizeMode="cover" />
						)}

						{/* Actual Image */}
						<Image
							source={{ uri: character.image_url }}
							style={[styles.image, !imageLoaded && styles.hiddenImage]}
							contentFit="cover"
							transition={300}
							cachePolicy="memory-disk"
							onLoad={() => setImageLoaded(true)}
						/>
					</>
				) : (
					<LinearGradient colors={['#6D5B00', '#3D3100']} style={styles.placeholderGradient}>
						<Icon set="ionicons" name="person" size={48} color="rgba(255, 255, 255, 0.3)" />
					</LinearGradient>
				)}

				{showVoteCount && (
					<View style={styles.voteContainer}>
						<Icon set="ionicons" name="heart" size={14} color="#FFFFFF" />
						<Text style={styles.voteCount}>{voteCount}</Text>
					</View>
				)}

				{character.sharing_preference === 'commons' && (
					<View style={styles.badge}>
						<Text style={styles.badgeText}>Commons</Text>
					</View>
				)}
			</View>

			<View style={styles.contentContainer}>
				<Text style={styles.name} numberOfLines={1}>
					{character.name}
				</Text>

				{character.original_description && (
					<Text style={styles.description} numberOfLines={2}>
						{character.original_description}
					</Text>
				)}

				<View style={styles.statsContainer}>
					{character.stories_count !== undefined && (
						<View style={styles.stat}>
							<Icon set="ionicons" name="book-outline" size={12} color="#999999" />
							<Text style={styles.statText}>{character.stories_count}</Text>
						</View>
					)}

					{character.share_code && (
						<View style={styles.stat}>
							<Icon set="ionicons" name="share-outline" size={12} color="#999999" />
							<Text style={styles.statText}>{character.share_code.slice(0, 6)}</Text>
						</View>
					)}
				</View>

				{(showCloneButton || onVote) && (
					<View style={styles.actionContainer}>
						{onVote && (
							<View style={styles.voteButtons}>
								<TouchableOpacity
									style={styles.actionButton}
									onPress={(e) => {
										e.stopPropagation();
										onVote('like');
									}}
								>
									<Icon set="ionicons" name="heart-outline" size={20} color="#FF69B4" />
								</TouchableOpacity>

								<TouchableOpacity
									style={styles.actionButton}
									onPress={(e) => {
										e.stopPropagation();
										onVote('star');
									}}
								>
									<Icon set="ionicons" name="star-outline" size={20} color="#FFD700" />
								</TouchableOpacity>
							</View>
						)}

						{showCloneButton && onClone && (
							<TouchableOpacity
								style={styles.cloneButton}
								onPress={(e) => {
									e.stopPropagation();
									onClone();
								}}
							>
								<Icon set="ionicons" name="copy-outline" size={18} color="#FFFFFF" />
							</TouchableOpacity>
						)}
					</View>
				)}
			</View>
		</TouchableOpacity>
	);
}

const styles = StyleSheet.create({
	container: {
		backgroundColor: '#2C2C2C',
		borderRadius: 12,
		overflow: 'hidden',
		shadowColor: '#000',
		shadowOffset: { width: 0, height: 2 },
		shadowOpacity: 0.25,
		shadowRadius: 3.84,
		elevation: 5,
		borderWidth: 1,
		borderColor: 'rgba(255, 255, 255, 0.1)',
	},
	imageContainer: {
		flex: 1,
		position: 'relative',
	},
	image: {
		width: '100%',
		height: '100%',
	},
	blurHashPlaceholder: {
		width: '100%',
		height: '100%',
		position: 'absolute',
		zIndex: 1,
	},
	hiddenImage: {
		opacity: 0,
	},
	placeholderGradient: {
		width: '100%',
		height: '100%',
		justifyContent: 'center',
		alignItems: 'center',
	},
	voteContainer: {
		position: 'absolute',
		top: 8,
		right: 8,
		flexDirection: 'row',
		alignItems: 'center',
		backgroundColor: 'rgba(0, 0, 0, 0.7)',
		paddingHorizontal: 8,
		paddingVertical: 4,
		borderRadius: 12,
		gap: 4,
	},
	voteCount: {
		color: '#FFFFFF',
		fontSize: 12,
		fontWeight: '600',
	},
	badge: {
		position: 'absolute',
		top: 8,
		left: 8,
		backgroundColor: 'rgba(255, 203, 0, 0.9)',
		paddingHorizontal: 8,
		paddingVertical: 4,
		borderRadius: 8,
	},
	badgeText: {
		color: '#000000',
		fontSize: 10,
		fontWeight: '600',
	},
	contentContainer: {
		padding: 12,
	},
	name: {
		color: '#FFFFFF',
		fontSize: 16,
		fontWeight: '600',
		marginBottom: 4,
	},
	description: {
		color: '#999999',
		fontSize: 12,
		lineHeight: 16,
		marginBottom: 8,
	},
	statsContainer: {
		flexDirection: 'row',
		gap: 12,
		marginBottom: 8,
	},
	stat: {
		flexDirection: 'row',
		alignItems: 'center',
		gap: 4,
	},
	statText: {
		color: '#999999',
		fontSize: 11,
	},
	actionContainer: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		marginTop: 8,
	},
	voteButtons: {
		flexDirection: 'row',
		gap: 8,
	},
	actionButton: {
		padding: 6,
		borderRadius: 8,
		backgroundColor: 'rgba(255, 255, 255, 0.05)',
	},
	cloneButton: {
		padding: 6,
		borderRadius: 8,
		backgroundColor: 'rgba(255, 255, 255, 0.1)',
	},
});