import React from 'react';
import { Linking, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Category, categoryTitles } from 'types/Category';
import { Item } from 'types/Item';

type MainContentProps = {
	selected: Category;
	onToggleMenu: () => void;
	data: Item[];
};

export default function MainContent({ selected, onToggleMenu, data }: MainContentProps) {
	return (
		<View style={styles.mainContent}>
			<TouchableOpacity style={styles.menuButton} onPress={onToggleMenu}>
				<Text style={styles.menuButtonText}>☰</Text>
			</TouchableOpacity>

			<Text style={styles.title}>{categoryTitles[selected]}</Text>

			<ScrollView style={styles.dataContainer}>
				{data.map(item => (
					<TouchableOpacity key={`${item.timestamp}-${item.title}`} onPress={() => Linking.openURL(item.link)}>
						<View style={styles.dataItem}>
							<Text style={styles.dataTitle}>{item.title}</Text>
							<Text style={styles.dataDescription}>{item.info}</Text>
						</View>
					</TouchableOpacity>
				))}
			</ScrollView>
		</View>
	);
}

const styles = StyleSheet.create({
	mainContent: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		position: 'relative',
		backgroundColor: '#f2f2f2',
	},
	menuButton: {
		position: 'absolute',
		top: 40,
		left: 16,
		zIndex: 1,
		backgroundColor: '#333',
		borderRadius: 20,
		padding: 8,
	},
	menuButtonText: {
		color: '#fff',
		fontSize: 24,
	},
	title: {
		fontSize: 24,
		fontWeight: 'bold',
		color: '#333',
		marginTop: 60,
		marginBottom: 16,
	},
	dataContainer: {
		width: '90%',
	},
	dataItem: {
		backgroundColor: '#fff',
		borderRadius: 8,
		padding: 16,
		marginBottom: 12,
		shadowColor: '#000',
		shadowOpacity: 0.05,
		shadowRadius: 4,
		elevation: 2,
	},
	dataTitle: {
		fontSize: 18,
		fontWeight: 'bold',
		color: '#222',
		marginBottom: 4,
	},
	dataDescription: {
		fontSize: 15,
		color: '#555',
	},
});