Composables cơ bản

@Composable
fun TextExamples() {
    Column {
        // Basic
        Text("Hello World")
        
        // Styled
        Text(
            text = "Styled Text",
            color = Color.Blue,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic,
            textAlign = TextAlign.Center,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis
        )
        
        // AnnotatedString
        Text(
            buildAnnotatedString {
                append("Normal ")
                withStyle(SpanStyle(color = Color.Red)) {
                    append("Red ")
                }
                withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
                    append("Bold")
                }
            }
        )
    }
}

@Composable
fun ButtonExamples() {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        // Filled Button
        Button(onClick = { }) {
            Text("Filled Button")
        }
        
        // Outlined Button
        OutlinedButton(onClick = { }) {
            Text("Outlined Button")
        }
        
        // Text Button
        TextButton(onClick = { }) {
            Text("Text Button")
        }
        
        // Icon Button
        IconButton(onClick = { }) {
            Icon(Icons.Default.Favorite, "Favorite")
        }
        
        // FAB
        FloatingActionButton(onClick = { }) {
            Icon(Icons.Default.Add, "Add")
        }
    }
}

@Composable
fun TextFieldExamples() {
    var text by remember { mutableStateOf("") }
    
    Column {
        // Basic TextField
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Label") },
            placeholder = { Text("Enter text") }
        )
        
        // Outlined TextField
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Outlined") },
            leadingIcon = { Icon(Icons.Default.Person, null) },
            trailingIcon = { Icon(Icons.Default.Clear, null) }
        )
        
        // Password TextField
        var password by remember { mutableStateOf("") }
        var visible by remember { mutableStateOf(false) }
        
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = if (visible) 
                VisualTransformation.None 
            else 
                PasswordVisualTransformation(),
            trailingIcon = {
                IconButton(onClick = { visible = !visible }) {
                    Icon(
                        if (visible) Icons.Default.Visibility 
                        else Icons.Default.VisibilityOff,
                        null
                    )
                }
            }
        )
    }
}

@Composable
fun ImageExamples() {
    Column {
        // Resource image
        Image(
            painter = painterResource(R.drawable.ic_launcher),
            contentDescription = "App Icon",
            modifier = Modifier.size(100.dp)
        )
        
        // Vector image
        Image(
            imageVector = Icons.Default.Star,
            contentDescription = "Star",
            colorFilter = ColorFilter.tint(Color.Yellow)
        )
        
        // With Coil (network image)
        AsyncImage(
            model = "https://example.com/image.jpg",
            contentDescription = "Network image",
            modifier = Modifier.size(200.dp),
            contentScale = ContentScale.Crop
        )
    }
}

@Composable
fun IconExamples() {
    Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Icon(Icons.Default.Home, "Home")
        Icon(Icons.Default.Settings, "Settings", tint = Color.Blue)
        Icon(Icons.Outlined.Favorite, "Favorite")
        Icon(
            painter = painterResource(R.drawable.custom_icon),
            contentDescription = "Custom"
        )
    }
}

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Card Title", fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(8.dp))
            Text("Card content goes here")
        }
    }
}

@Composable
fun ToggleExamples() {
    var checked by remember { mutableStateOf(false) }
    var switched by remember { mutableStateOf(false) }
    
    Column {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Checkbox(
                checked = checked,
                onCheckedChange = { checked = it }
            )
            Text("Checkbox")
        }
        
        Row(verticalAlignment = Alignment.CenterVertically) {
            Switch(
                checked = switched,
                onCheckedChange = { switched = it }
            )
            Text("Switch")
        }
    }
}

@Composable
fun RadioButtonExample() {
    val options = listOf("Option 1", "Option 2", "Option 3")
    var selected by remember { mutableStateOf(options[0]) }
    
    Column {
        options.forEach { option ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { selected = option }
            ) {
                RadioButton(
                    selected = selected == option,
                    onClick = { selected = option }
                )
                Text(option)
            }
        }
    }
}

@Composable
fun SliderExample() {
    var value by remember { mutableStateOf(50f) }
    
    Column {
        Slider(
            value = value,
            onValueChange = { value = it },
            valueRange = 0f..100f,
            steps = 9
        )
        Text("Value: ${value.toInt()}")
    }
}

@Composable
fun ProgressExamples() {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        // Indeterminate
        CircularProgressIndicator()
        LinearProgressIndicator()
        
        // Determinate
        CircularProgressIndicator(progress = 0.7f)
        LinearProgressIndicator(progress = 0.7f)
    }
}