managarten/apps-archived/memoro/apps/mobile/features/onboarding/components/PageOnboardingModal.tsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Text from '~/components/atoms/Text';
import BaseModal from '~/components/atoms/BaseModal';
import { useTheme } from '~/features/theme/ThemeProvider';
import Icon from '~/components/atoms/Icon';

interface Feature {
	icon: string;
	title: string;
	description: string;
}

interface PageOnboardingModalProps {
	visible: boolean;
	onClose: () => void;
	title: string;
	message: string;
	features: Feature[];
	actionLabel: string;
}

/**
 * Page-specific onboarding modal that explains features of a page
 */
const PageOnboardingModal = ({
	visible,
	onClose,
	title,
	message,
	features,
	actionLabel,
}: PageOnboardingModalProps): React.ReactElement => {
	const { colors } = useTheme();

	return (
		<BaseModal
			isVisible={visible}
			onClose={onClose}
			title={title}
			animationType="fade"
			size="medium"
			primaryButtonText={actionLabel}
			onPrimaryButtonPress={onClose}
			scrollable={true}
		>
			<View style={styles.contentContainer}>
				{message && <Text style={styles.message}>{message}</Text>}

				<View style={styles.featuresContainer}>
					{features.map((feature, index) => (
						<View
							key={index}
							style={[
								styles.featureCard,
								{
									backgroundColor: colors.contentBackgroundHover,
									borderColor: colors.border,
								},
							]}
						>
							<View style={styles.featureItem}>
								<View
									style={[styles.iconContainer, { backgroundColor: `${colors.primaryButton}20` }]}
								>
									<Icon name={feature.icon} size={24} color={colors.text} />
								</View>
								<View style={styles.featureTextContainer}>
									<Text variant="h3" style={styles.featureTitle}>
										{feature.title}
									</Text>
									<Text variant="caption">{feature.description}</Text>
								</View>
							</View>
						</View>
					))}
				</View>
			</View>
		</BaseModal>
	);
};

const styles = StyleSheet.create({
	contentContainer: {
		width: '100%',
	},
	message: {
		fontSize: 16,
		lineHeight: 24,
		marginBottom: 20,
	},
	featuresContainer: {
		gap: 12,
	},
	featureCard: {
		borderRadius: 12,
		padding: 12,
		borderWidth: 1,
	},
	featureItem: {
		flexDirection: 'row',
		alignItems: 'flex-start',
	},
	iconContainer: {
		width: 40,
		height: 40,
		borderRadius: 10,
		justifyContent: 'center',
		alignItems: 'center',
		marginRight: 12,
	},
	featureTextContainer: {
		flex: 1,
	},
	featureTitle: {
		marginBottom: 4,
	},
	featureDescription: {
		// Keine fontSize/lineHeight, damit variant="caption" diese steuert
	},
});

export default PageOnboardingModal;