import { StyleSheet, Text, View } from 'react-native';

import { Header } from '@/components/ui/Header';
import { Screen } from '@/components/ui/Screen';

import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { typography } from '@/theme/typography';

export default function MyEventsTabScreen() {
	return (
		<Screen>
			<Header variant="large" overline="12 événements" title="Mes events" />

			<View style={styles.container}>
				<Text style={styles.title}>My Events</Text>
				<Text style={styles.description}>Base ecran mes events</Text>
			</View>
		</Screen>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: colors.deepBackground,
		padding: spacing[24],
		justifyContent: 'center',
		gap: spacing[8],
	},
	title: {
		...typography.screenTitle,
		color: colors.textPrimary,
	},
	description: {
		...typography.body,
		color: colors.textSecondary,
	},
});