managarten/apps-archived/memoro/apps/mobile/components/skeletons/sections/TranscriptSkeleton.tsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import {
	getSkeletonColor,
	skeletonBase,
	skeletonText,
	skeletonSpacing,
} from '../utils/skeletonStyles';
import { SkeletonAnimation } from '../utils/SkeletonAnimation';

interface TranscriptSkeletonProps {
	lineCount?: number;
}

export const TranscriptSkeleton: React.FC<TranscriptSkeletonProps> = ({ lineCount = 8 }) => {
	const { colors, isDark } = useTheme();
	const skeletonColor = getSkeletonColor(isDark, colors);

	return (
		<SkeletonAnimation style={styles.container}>
			<View
				style={[
					styles.transcriptCard,
					{ backgroundColor: colors.surface, borderColor: colors.border },
				]}
			>
				<View
					style={[
						styles.headerLine,
						skeletonBase,
						skeletonText(20),
						{ backgroundColor: skeletonColor },
					]}
				/>
				<View style={styles.content}>
					{Array.from({ length: lineCount }).map((_, index) => (
						<View
							key={index}
							style={[
								styles.textLine,
								skeletonBase,
								skeletonText(14),
								{
									backgroundColor: skeletonColor,
									width: `${Math.random() * 30 + 70}%`, // Random width between 70-100%
								},
							]}
						/>
					))}
				</View>
			</View>
		</SkeletonAnimation>
	);
};

const styles = StyleSheet.create({
	container: {
		paddingHorizontal: 20, // Match memo page spacing
		marginBottom: 20, // Same as transcriptContainer
	},
	transcriptCard: {
		borderRadius: 12,
		borderWidth: 1,
		padding: 16,
		shadowColor: '#000',
		shadowOffset: { width: 0, height: 1 },
		shadowOpacity: 0.05,
		shadowRadius: 2,
		elevation: 2,
	},
	headerLine: {
		width: '40%',
		marginBottom: skeletonSpacing.md,
	},
	content: {
		gap: skeletonSpacing.xs,
	},
	textLine: {
		marginBottom: 2,
	},
});