import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun LoginPage() {
    // State variables to store the user input
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    // A column to arrange the views vertically
    Column(
        modifier = Modifier
            .fillMaxSize() // Fill the entire screen
            .padding(16.dp), // Add some padding around the edges
        horizontalAlignment = Alignment.CenterHorizontally, // Center the views horizontally
        verticalArrangement = Arrangement.Center // Center the views vertically
    ) {
        // A text field to enter the username
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") }
        )
        // Add some vertical space
        Spacer(modifier = Modifier.height(8.dp))
        // A text field to enter the password
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation() // Hide the password characters
        )
        // Add some vertical space
        Spacer(modifier = Modifier.height(16.dp))
        // A button to submit the login form
        Button(onClick = { /* TODO: Handle login logic */ }) {
            Text("Login")
        }
    }
}