//SideMenu.tsx
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Category } from "../types/Category";

export type MenuItem = {
	label: string;
	key: Category;
};

type SideMenuProps = {
	menuItems: MenuItem[];
	selected: Category;
	onSelect: (key: Category) => void;
	onLogout?: () => void;
};


export function SideMenu({ menuItems, selected, onSelect, onLogout }: SideMenuProps) {
	return (
		<View style={styles.sideMenu}>
			{menuItems.map(item => (
				<TouchableOpacity
					key={item.key}
					style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
					onPress={() => onSelect(item.key)}>
					<Text style={styles.menuText}>{item.label}</Text>
				</TouchableOpacity>
			))}

			{onLogout && (
				<TouchableOpacity
					style={[styles.menuItem, styles.logoutButton]}
					onPress={onLogout}>
					<Text style={[styles.menuText, { color: '#fff' }]}>Logout</Text>
				</TouchableOpacity>
			)}
		</View>
	);
}

const styles = StyleSheet.create({
	sideMenu: {
		backgroundColor: '#333',
		paddingTop: 40,
		paddingHorizontal: 16,
	},
	menuItem: {
		paddingVertical: 16,
		borderRadius: 4,
		marginBottom: 8,
	},
	menuItemSelected: {
		backgroundColor: '#555',
	},
	menuText: {
		color: '#fff',
		fontSize: 18,
		textAlign: 'center',
	},
	logoutButton: {
		marginTop: 'auto',
		backgroundColor: '#111',
		paddingVertical: 16,
		borderRadius: 4,
		alignItems: 'center',
		justifyContent: 'center',
		flexDirection: 'column',
	},
});