import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
	container: {
		flex: 1,
		flexDirection: "row",
		backgroundColor: "#f2f2f2",
	},
	sideMenu: {
		width: 0,
		backgroundColor: "#333",
		paddingTop: 40,
		paddingHorizontal: 0,
		overflow: "hidden",
	},
	sideMenuOpen: {
		width: 180,
		paddingHorizontal: 16,
	},
	//sideMenuOverlay: {
	//position: "absolute",
	//top: 0,
	//left: 0,
	//bottom: 0,
	//width: "70%",
	//zIndex: 10,
	//backgroundColor: "#222",
	//},
	menuItem: {
		paddingVertical: 16,
		paddingHorizontal: 8,
		borderRadius: 4,
		marginBottom: 8,
	},
	menuItemSelected: {
		backgroundColor: "#555",
	},
	menuText: {
		color: "#fff",
		fontSize: 18,
	},
	mainContent: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
		position: "relative",
	},
	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",
		marginTop: 60,
		color: "#333",
	},
	dataContainer: {
		marginTop: 24,
		width: "90%",
	},
	dataItem: {
		backgroundColor: '#fff',
		borderRadius: 8,
		padding: 16,
		marginBottom: 12,
		boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
	},
	dataTitle: {
		fontSize: 18,
		fontWeight: "bold",
		color: "#222",
		marginBottom: 4,
	},
	dataDescription: {
		fontSize: 15,
		color: "#555",
	},
});