package com.vpn.fastestvpnservice.screens.bottomNavBarScreens

import android.accessibilityservice.GestureDescription
import android.app.Activity
import android.util.Log
import android.widget.Toast
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.indication
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.selection.selectable
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.CallSplit
import androidx.compose.material.icons.filled.Block
import androidx.compose.material.icons.filled.CallSplit
import androidx.compose.material.icons.filled.Circle
import androidx.compose.material.icons.filled.DarkMode
import androidx.compose.material.icons.filled.FlashOff
import androidx.compose.material.icons.filled.HdrAuto
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Security
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.filled.SmartDisplay
import androidx.compose.material.icons.filled.SwitchRight
import androidx.compose.material.icons.outlined.Circle
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchColors
import androidx.compose.material3.SwitchDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
import com.vpn.fastestvpnservice.R
import com.vpn.fastestvpnservice.beans.isDarkTheme
import com.vpn.fastestvpnservice.beans.selectedtheme
import com.vpn.fastestvpnservice.beans.themesList
import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
import com.vpn.fastestvpnservice.sealedClass.Screen
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Settings(navHostController: NavHostController) {

    Box(modifier = Modifier
        .background(MaterialTheme.colorScheme.background)
        .fillMaxSize(),
//        contentAlignment = Alignment.Center
    ) {
//        val view = LocalView.current
//        val window = (view.context as Activity).window
//        window.statusBarColor = colorResource(id = R.color.background_color_gray2).toArgb()

        Column(
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.Start,
            modifier = Modifier
                .padding(start = 16.dp, end = 24.dp)
                .fillMaxSize()
        ) {
            if (BottomBarScreen.Settings.isTrue) {
                AddRowSettingsSmart(
                    icon = R.drawable.smart_connect3x,
                    text = "Smart Connect",
                    isRowShown = false,
                    isSheetShown = true
                )
            }

            Spacer(modifier = Modifier.height(60.dp))
            AddTextSettings(
                text = "Settings",
                size = 28.sp,
                color = MaterialTheme.colorScheme.primary
            )
            AddRowSettingsColumn(
                icon = R.drawable.vpn_protocols3x,
                text = "VPN Protocols",
                desc = "WireGuard"
            )
            AddRowSwitch(
                icon = R.drawable.autoconnect3x,
                text = "Auto Connect"
            )
            AddRowSettingsSmart(
                icon = R.drawable.smart_connect3x,
                text = "Smart Connect",
                isRowShown = true,
                isSheetShown = false
            )
            AddRowSwitch(
                icon = R.drawable.adblock3x,
                text = "AdBlock"
            )
            AddRowSwitch(
                icon = R.drawable.kill_switch3x,
                text = "Kill Switch"
            )
            AddRowSettings(
                icon = R.drawable.split_tunneling3x,
                text = "Split Tunneling",
                onClick = { navHostController.navigate(Screen.SplitTunneling.route) }
            )
            AddRowSettings(
                icon = R.drawable.notification3x,
                text = "Notifications",
                onClick = { navHostController.navigate(Screen.Notifications.route) }
            )
            AddRowDarkLightTheme(
                icon = Icons.Default.DarkMode,
                text = "Theme")
        }
    }
}

@Composable
fun ColumnScope.AddRowSwitch(icon: Int, text: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 33.dp)
            .background(Color.Transparent)
            .height(30.dp),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.primary)            )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                style = TextStyle(
                    color = MaterialTheme.colorScheme.primary,
                    fontSize = 16.sp,
                    fontStyle = FontStyle.Normal,
                    fontWeight = FontWeight.Medium
                ),
                maxLines = 1,
                modifier = Modifier
                    .padding(start = 20.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(start = 0.dp, end = 0.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent
        ) {
            var isSwitch by remember { mutableStateOf(false) }
            Switch(
                checked = isSwitch,
                onCheckedChange = {
                    isSwitch = it
                },
                modifier = Modifier.scale(0.8F),
                colors = SwitchDefaults.colors(
                    checkedThumbColor = Color.White,
                    checkedTrackColor = colorResource(id = R.color.switch_green),
                    uncheckedThumbColor = Color.White,
                    uncheckedTrackColor = colorResource(id = R.color.switch_gray),
                    uncheckedBorderColor = colorResource(id = R.color.switch_gray)
                ),
                thumbContent = {

                }
            )
        }
    }
}

@Composable
fun ColumnScope.AddRowSettings(
    icon: Int,
    text: String,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 33.dp)
            .background(Color.Transparent)
            .height(30.dp)
            .pointerInput(Unit) {
                detectTapGestures {
                    onClick()
                }
            },
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.primary)            )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                style = TextStyle(
                    color = MaterialTheme.colorScheme.primary,
                    fontSize = 16.sp,
                    fontStyle = FontStyle.Normal,
                    fontWeight = FontWeight.Medium
                ),
                maxLines = 1,
                modifier = Modifier
                    .padding(start = 20.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(start = 15.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 20.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.primary
                )
            )
        }

    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ColumnScope.AddRowSettingsColumn(
    icon: Int,
    text: String,
    desc: String
) {
    var isSheetOpen by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState()
    val protocols = listOf<String>(
        "Auto", "WireGuard", "IKEv2", "OpenVPN TCP", "OpenVPN UDP"
    )
    var selectedProtocol by remember { mutableStateOf(protocols[1]) }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 33.dp)
            .background(Color.Transparent)
            .height(40.dp)
//            .clickable { isSheetOpen = true }
            .pointerInput(Unit) {
                detectTapGestures {
                    isSheetOpen = true
                }
            }
        ,
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Image(
                painter = painterResource(id = icon),
                contentDescription = "World",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.primary)
            )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Column {
                Text(text = text,
                    style = TextStyle(
                        color = MaterialTheme.colorScheme.primary,
                        fontSize = 16.sp,
                        fontStyle = FontStyle.Normal,
                        fontWeight = FontWeight.Medium
                    ),
                    maxLines = 1,
                    modifier = Modifier
                        .padding(start = 20.dp, end = 0.dp)
                        .weight(1f)
                )
                Spacer(modifier = Modifier.height(2.dp))
                Text(text = selectedProtocol,
                    style = TextStyle(
                        color = MaterialTheme.colorScheme.primary,
                        fontSize = 12.sp,
                        fontStyle = FontStyle.Normal,
                        fontWeight = FontWeight.Medium
                    ),
                    maxLines = 1,
                    modifier = Modifier
                        .padding(start = 20.dp, end = 0.dp)
                        .weight(1f)
                        .alpha(0.6F),
                )
            }
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(start = 15.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 20.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.primary
                )
            )
        }

        if (isSheetOpen) {
            ModalBottomSheet(
                onDismissRequest = { isSheetOpen = false },
                sheetState = sheetState,
                containerColor = MaterialTheme.colorScheme.background
            ) {
                Box(modifier = Modifier
                    .background(Color.Transparent)
                    .fillMaxWidth()
                    .height(340.dp)
                    .padding(start = 0.dp, top = 5.dp),
                    ) {
                    Column(
                        verticalArrangement = Arrangement.Top,
                        horizontalAlignment = Alignment.Start
                    ) {
                        AddTextSettings(
                            text = "VPN Protocols",
                            size = 18.sp,
                            color = MaterialTheme.colorScheme.primary,
                            bottomPadding = 15.dp,
                            startPadding = 16.dp
                        )
                        protocols.forEach { protocol ->
                            Row(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .background(Color.Transparent)
                                    .padding(start = 2.dp)
//                                    .selectable(
//                                        selected = selectedProtocol == protocol,
//                                        onClick = {
//                                            selectedProtocol = protocol
//                                        },
//                                    )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                                ,
                                verticalAlignment = Alignment.CenterVertically
                            ) {
                                RadioButton(selected = protocol == selectedProtocol,
                                    onClick = {
                                        selectedProtocol = protocol
                                    },
                                    colors = RadioButtonDefaults.colors(
                                        selectedColor = colorResource(id = R.color.radio_button_blue),
                                        unselectedColor = colorResource(id = R.color.gray_icon),)
                                    )
                                Text(text = protocol,
                                    modifier = Modifier.padding(start = 12.dp),
                                    style = TextStyle(
                                        fontSize = 14.sp,
                                        color = MaterialTheme.colorScheme.primary
                                    )
                                    )
                            }
                        }
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AddRowDarkLightTheme(
    icon: ImageVector,
    text: String,
) {
    var isThemeSheetOpen by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState()

//    var selectedtheme by remember {
//        mutableStateOf(themesList[0]) }

    val isSystemInDarkTheme = isSystemInDarkTheme()
    val systemTheme by remember { mutableStateOf(isSystemInDarkTheme) }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 33.dp)
            .background(Color.Transparent)
            .pointerInput(Unit) {
                detectTapGestures {
                    isThemeSheetOpen = true
                }
            }
            .height(30.dp),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Image(
                imageVector = icon,
                contentDescription = "Select Theme",
                modifier = Modifier
                    .padding(start = 0.dp)
                    .size(24.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.primary)                )
        }

        Surface(
            modifier = Modifier.padding(start = 0.dp),
            color = Color.Transparent
        ) {
            Text(text = text,
                style = TextStyle(
                    color = MaterialTheme.colorScheme.primary,
                    fontSize = 16.sp,
                    fontStyle = FontStyle.Normal,
                    fontWeight = FontWeight.Medium
                ),
                maxLines = 1,
                modifier = Modifier
                    .padding(start = 20.dp, end = 0.dp)
                    .weight(1f)
            )
        }
        Spacer(modifier = Modifier.weight(1f))

        Surface(
            modifier = Modifier
                .padding(start = 15.dp)
                .align(Alignment.CenterVertically),
            color = Color.Transparent

        ) {
            Image(
                painter = painterResource(id = R.drawable.frontarrow3x),
                contentDescription = "Front_Arrow",
                modifier = Modifier
                    .padding(start = 0.dp, end = 20.dp)
                    .size(10.dp, 18.dp)
                    .weight(1f),
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colorScheme.primary
                )
            )
        }

    }

    if (isThemeSheetOpen) {
        ModalBottomSheet(
            onDismissRequest = { isThemeSheetOpen = false
            },
            sheetState = sheetState,
            containerColor = MaterialTheme.colorScheme.background
        ) {
            Box(modifier = Modifier
                .background(Color.Transparent)
                .fillMaxWidth()
                .height(250.dp)
                .padding(start = 0.dp, top = 10.dp),
            ) {

                Log.d("test_theme", "systemTheme -> $systemTheme")

                Column(
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.Start
                ) {
                    AddTextSettings(
                        text = "Theme",
                        size = 18.sp,
                        color = MaterialTheme.colorScheme.primary,
                        bottomPadding = 20.dp,
                        startPadding = 16.dp
                    )
                    themesList.forEach { theme ->

                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(Color.Transparent)
                                .padding(start = 2.dp)
//                                    .selectable(
//                                        selected = selectedProtocol == protocol,
//                                        onClick = {
//                                            selectedProtocol = protocol
//                                        },
//                                    )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                            ,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
//                            val themeState = isSystemInDarkTheme()
//                            val isSystemInDarkTheme by remember { mutableStateOf(themeState) }
                            RadioButton(selected = theme == selectedtheme.value,
                                onClick = {
                                    selectedtheme.value = theme

                                    if (selectedtheme.value == themesList[0])
                                    {
                                        Log.d("test_theme", "true: -> $systemTheme")
                                        isDarkTheme.value = systemTheme
                                    }
                                    else {
                                        Log.d("test_theme", "false: -> $systemTheme")
                                        isDarkTheme.value = selectedtheme.value == themesList[2]
                                    }

                                },
                                colors = RadioButtonDefaults.colors(
                                    selectedColor = colorResource(id = R.color.radio_button_blue),
                                    unselectedColor = colorResource(id = R.color.gray_icon),)
                            )
                            Text(text = theme,
                                modifier = Modifier.padding(start = 12.dp),
                                style = TextStyle(
                                    fontSize = 14.sp,
                                    color = MaterialTheme.colorScheme.primary
                                )
                            )
                        }
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ColumnScope.AddRowSettingsSmart(
    icon: Int,
    text: String,
    isRowShown: Boolean,
    isSheetShown: Boolean
) {
    var isSmartSheetOpen by remember { mutableStateOf(isSheetShown) }
    val sheetState = rememberModalBottomSheetState()
    val smartConnect = listOf<String>(
        "Recommended", "Recently", "Any Specific"
    )
    var selectedSmartConnect by remember {
        mutableStateOf(smartConnect[0]) }

    if (isRowShown) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 33.dp)
                .background(Color.Transparent)
                .pointerInput(Unit) {
                    detectTapGestures {
                        isSmartSheetOpen = true
                    }
                }
                .height(30.dp),
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = Alignment.CenterVertically
        ) {

            Surface(
                modifier = Modifier.padding(start = 0.dp),
                color = Color.Transparent
            ) {
                Image(
                    painter = painterResource(id = icon),
                    contentDescription = "World",
                    modifier = Modifier
                        .padding(start = 0.dp)
                        .size(24.dp)
                        .weight(1f),
                    colorFilter = ColorFilter.tint(
                        MaterialTheme.colorScheme.primary)                )
            }

            Surface(
                modifier = Modifier.padding(start = 0.dp),
                color = Color.Transparent
            ) {
                Text(text = text,
                    style = TextStyle(
                        color = MaterialTheme.colorScheme.primary,
                        fontSize = 16.sp,
                        fontStyle = FontStyle.Normal,
                        fontWeight = FontWeight.Medium
                    ),
                    maxLines = 1,
                    modifier = Modifier
                        .padding(start = 20.dp, end = 0.dp)
                        .weight(1f)
                )
            }
            Spacer(modifier = Modifier.weight(1f))

            Surface(
                modifier = Modifier
                    .padding(start = 15.dp)
                    .align(Alignment.CenterVertically),
                color = Color.Transparent

            ) {
                Image(
                    painter = painterResource(id = R.drawable.frontarrow3x),
                    contentDescription = "Front_Arrow",
                    modifier = Modifier
                        .padding(start = 0.dp, end = 20.dp)
                        .size(10.dp, 18.dp)
                        .weight(1f),
                    colorFilter = ColorFilter.tint(
                        MaterialTheme.colorScheme.primary
                    )
                )
            }

        }
    }

    if (isSmartSheetOpen) {
        ModalBottomSheet(
            onDismissRequest = { isSmartSheetOpen = false
                BottomBarScreen.Settings.isTrue = false
                               },
            sheetState = sheetState,
            containerColor = MaterialTheme.colorScheme.background
        ) {
            Box(modifier = Modifier
                .background(Color.Transparent)
                .fillMaxWidth()
                .height(250.dp)
                .padding(start = 0.dp, top = 10.dp),
            ) {
                Column(
                    verticalArrangement = Arrangement.Top,
                    horizontalAlignment = Alignment.Start
                ) {
                    AddTextSettings(
                        text = "Smart Connect",
                        size = 18.sp,
                        color = MaterialTheme.colorScheme.primary,
                        bottomPadding = 20.dp,
                        startPadding = 16.dp
                    )
                    smartConnect.forEach { smart ->
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(Color.Transparent)
                                .padding(start = 2.dp)
//                                    .selectable(
//                                        selected = selectedProtocol == protocol,
//                                        onClick = {
//                                            selectedProtocol = protocol
//                                        },
//                                    )
//                                    .indication(
//                                        indication = null,
//                                        interactionSource = remember {
//                                            MutableInteractionSource()
//                                        }
//                                    )
                            ,
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            RadioButton(selected = smart == selectedSmartConnect,
                                onClick = {
                                    selectedSmartConnect = smart
                                },
                                colors = RadioButtonDefaults.colors(
                                    selectedColor = colorResource(id = R.color.radio_button_blue),
                                    unselectedColor = colorResource(id = R.color.gray_icon),)
                            )
                            Text(text = smart,
                                modifier = Modifier.padding(start = 12.dp),
                                style = TextStyle(
                                    fontSize = 14.sp,
                                    color = MaterialTheme.colorScheme.primary
                                )
                            )
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun ColumnScope.AddTextSettings(
    text: String,
    size: TextUnit,
    color: Color,
    bottomPadding: Dp = 0.dp,
    startPadding: Dp = 0.dp
) {
    Text(
        text = text,
        style = TextStyle(
            fontSize = size,
            color = color,
            textAlign = TextAlign.Center,
            fontStyle = FontStyle.Normal,
            fontWeight = FontWeight.Medium,
        ),
        modifier = Modifier.padding(bottom = bottomPadding, start = startPadding)

    )
}

@Preview
@Composable
fun SettingsPreview() {
    Settings(rememberNavController())
}