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,
	},
	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,
		shadowColor: "#000",
		shadowOpacity: 0.05,
		shadowRadius: 4,
		elevation: 2,
	},
	dataTitle: {
		fontSize: 18,
		fontWeight: "bold",
		color: "#222",
		marginBottom: 4,
	},
	dataDescription: {
		fontSize: 15,
		color: "#555",
	},
});