import React from 'react';
import { ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Category } from 'types/Category';
import { Item } from 'types/Item';
import { styles } from '../styles/HomeScreen.styles';

type HomeScreenProps = {
	selectedCategory?: Category;
	onSelectCategory?: (key: Category) => void;
	data?: Item[];
	apiKey?: string | null;
	setApiKey?: (key: string) => void;
	tempKey?: string;
	setTempKey?: (key: string) => void;
};

export default function HomeScreen({
	selectedCategory = 'home',
	data = [],
}: HomeScreenProps) {
	const filteredData = selectedCategory === 'home'
		? data
		: data.filter(item => item.category === selectedCategory);

	return (
		<SafeAreaView style={styles.container}>
			<View style={styles.mainContent}>
				<Text style={styles.title}>{selectedCategory}</Text>
				<ScrollView style={styles.dataContainer}>
					{filteredData.length === 0 ? (
						<Text style={{ textAlign: 'center', marginTop: 20 }}>No items yet</Text>
					) : (
						filteredData.map(item => (
							<View key={`${item.timestamp}-${item.title}`} style={styles.dataItem}>
								<Text style={styles.dataTitle}>{item.title}</Text>
								<Text style={styles.dataDescription}>{item.info}</Text>
							</View>
						))
					)}
				</ScrollView>
			</View>
		</SafeAreaView>
	);
}