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

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

export const QuestionButtonSkeleton: React.FC = () => {
	const { colors, isDark } = useTheme();
	const skeletonColor = getSkeletonColor(isDark, colors);

	return (
		<SkeletonAnimation style={styles.container}>
			<View
				style={[
					skeletonBase,
					skeletonBox('100%', 48),
					styles.button,
					{ backgroundColor: skeletonColor },
				]}
			/>
		</SkeletonAnimation>
	);
};

const styles = StyleSheet.create({
	container: {
		paddingHorizontal: 20, // Same as questionButtonContainer
		marginBottom: 12, // Same as questionButtonContainer
	},
	button: {
		borderRadius: 24,
	},
});