managarten/apps/chat/apps/mobile/components/MessageItem.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '@react-navigation/native';
import SkeletonLoader from './SkeletonLoader';
import TypingIndicator from './TypingIndicator';

type MessageProps = {
	text: string;
	sender: 'user' | 'ai';
	timestamp: Date;
	isLoading?: boolean;
};

export default function MessageItem({ text, sender, timestamp, isLoading = false }: MessageProps) {
	const { colors } = useTheme();

	const isUser = sender === 'user';

	return (
		<View
			style={[
				styles.container,
				isUser ? styles.userContainer : styles.aiContainer,
				{ backgroundColor: isUser ? colors.primary : colors.card },
			]}
		>
			{isLoading && sender === 'ai' ? (
				// Zeige Skeleton oder TypingIndicator wenn geladen wird
				<>
					<SkeletonLoader lines={4} style={styles.skeletonContainer} />
					<TypingIndicator dotColor={colors.text + '80'} style={styles.typingIndicator} />
				</>
			) : (
				// Zeige die eigentliche Nachricht
				<Text style={[styles.messageText, { color: isUser ? '#fff' : colors.text }]}>{text}</Text>
			)}

			<Text
				style={[styles.timestamp, { color: isUser ? 'rgba(255,255,255,0.7)' : colors.text + '80' }]}
			>
				{timestamp.getHours().toString().padStart(2, '0')}:
				{timestamp.getMinutes().toString().padStart(2, '0')}
			</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		padding: 12,
		borderRadius: 16,
		marginVertical: 4,
		marginHorizontal: 12,
	},
	userContainer: {
		maxWidth: '80%',
		alignSelf: 'flex-start',
		borderBottomLeftRadius: 4,
	},
	aiContainer: {
		width: '95%',
		alignSelf: 'flex-end',
		borderBottomRightRadius: 4,
	},
	messageText: {
		fontSize: 16,
		lineHeight: 22,
	},
	timestamp: {
		fontSize: 12,
		marginTop: 4,
		alignSelf: 'flex-end',
	},
	skeletonContainer: {
		padding: 0,
		margin: 0,
		opacity: 0.8,
	},
	typingIndicator: {
		marginLeft: -5,
		marginTop: 5,
	},
});