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

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

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

export default function SideMenu({ menuItems, selected, onSelect }: 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>
			))}
		</View>
	);
}

const styles = StyleSheet.create({
	sideMenu: {
		width: 180,
		backgroundColor: '#333',
		paddingTop: 40,
		paddingHorizontal: 16,
	},
	menuItem: {
		paddingVertical: 16,
		borderRadius: 4,
		marginBottom: 8,
	},
	menuItemSelected: {
		backgroundColor: '#555',
	},
	menuText: {
		color: '#fff',
		fontSize: 18,
	},
});