@Composable
fun BottomNavBar(navController: NavController) {
    val items = listOf(
        Screen.Home,
        Screen.Settings,
        Screen.Logs
    )

    val haptic = LocalHapticFeedback.current

    Surface {
        NavigationBar(
            containerColor = MaterialTheme.colorScheme.tertiaryContainer.copy(0.1f),
            modifier = Modifier.consumeWindowInsets(WindowInsets(0, 0, 0, 0))
        ) {
            val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
            items.forEach { screen ->
                NavigationBarItem(
                    selected = currentRoute == screen.route,
                    onClick = {
                        if (currentRoute != screen.route) {
                            // Trigger haptic feedback
                            haptic.performHapticFeedback(HapticFeedbackType.LongPress)

                            // Navigate to the selected route
                            navController.navigate(screen.route) {
                                popUpTo(navController.graph.startDestinationId) {
                                    saveState = true
                                }
                                restoreState = true
                                launchSingleTop = true
                            }
                        }
                    },
                    label = {
                        Text(
                            screen.route.replaceFirstChar {
                                if (it.isLowerCase()) it.titlecase(
                                    Locale.ROOT
                                ) else it.toString()
                            },
                            fontSize = 10.sp, // Set the font size of the label
                            maxLines = 1, // Set the maximum number of lines for the label
                        )
                    },
                    icon = {
                        Crossfade(
                            targetState = currentRoute == screen.route,
                            animationSpec = tween(600), label = "" // 600ms animation duration
                        ) { isSelected ->
                            val icon: Painter = when (screen) {
                                Screen.Home -> {
                                    if (isSelected) {
                                        painterResource(R.drawable.ic_home_filled_2)
                                    } else {
                                        painterResource(R.drawable.ic_home_empty_2)
                                    }
                                }
                                Screen.Settings -> {
                                    if (isSelected) {
                                        painterResource(R.drawable.ic_settings_filled_2)
                                    } else {
                                        painterResource(R.drawable.ic_settings_empty_2)
                                    }
                                }
                                Screen.Logs -> {
                                    if (isSelected) {
                                        painterResource(R.drawable.ic_log_filled_2)
                                    } else {
                                        painterResource(R.drawable.ic_log_empty_2)
                                    }
                                }
                            }
                            Icon(
                                painter = icon,
                                contentDescription = screen.route,
                                modifier = Modifier.size(18.dp) // Set the size of the icon
                            )
                        }
                    }
                )
            }
        }
    }
}