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

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import Skeleton from '../atoms/Skeleton';

interface StoryCardSkeletonProps {
	width?: number;
}

const ASPECT_RATIO = 1.5; // Same as StoryCard

const StoryCardSkeleton: React.FC<StoryCardSkeletonProps> = ({ width }) => {
	const screenWidth = Dimensions.get('window').width;
	const cardWidth = width || screenWidth * 0.4;
	const cardHeight = cardWidth * ASPECT_RATIO;

	const dynamicStyles = StyleSheet.create({
		container: {
			width: cardWidth,
			height: cardHeight,
			backgroundColor: '#2C2C2C',
			borderRadius: 12,
			overflow: 'hidden',
			shadowColor: '#000',
			shadowOffset: {
				width: 4,
				height: 4,
			},
			shadowOpacity: 0.3,
			shadowRadius: 5,
			elevation: 8,
			transform: [{ perspective: 1000 }, { rotateY: '-5deg' }],
		},
	});

	return (
		<View style={dynamicStyles.container}>
			<Skeleton style={styles.image} />
			<View style={styles.textContainer}>
				<Skeleton style={styles.titleSkeleton} />
				<View style={styles.footer}>
					<Skeleton style={styles.authorSkeleton} />
					<Skeleton style={styles.pagesSkeleton} />
				</View>
			</View>
		</View>
	);
};

const styles = StyleSheet.create({
	image: {
		width: '100%',
		height: '100%',
		position: 'absolute',
		backgroundColor: '#2C2C2C',
	},
	textContainer: {
		position: 'absolute',
		bottom: 0,
		left: 0,
		right: 0,
		padding: 16,
		paddingTop: 32,
		backgroundColor: 'rgba(0,0,0,0.5)',
		height: '40%', // Ensure consistent height with the actual component
	},
	titleSkeleton: {
		height: 20,
		width: '80%',
		backgroundColor: '#2C2C2C',
		borderRadius: 4,
		marginBottom: 8,
	},
	footer: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		marginTop: 8,
	},
	authorSkeleton: {
		height: 16,
		width: '40%',
		backgroundColor: '#2C2C2C',
		borderRadius: 4,
	},
	pagesSkeleton: {
		height: 16,
		width: '20%',
		backgroundColor: '#2C2C2C',
		borderRadius: 4,
	},
});

export default StoryCardSkeleton;