A Composable function is a regular Kotlin function annotated with @Composable that describes a piece of UI. When called, it emits UI elements into the composition.
Key Characteristics:

• Annotated with @Composable: Must have the annotation to be part of the composition
• Fast and idempotent: Should be fast to execute and produce the same result for the same inputs
• Side-effect free: Should not have side effects in the main body
• Can call other Composables: Can compose other UI elements
• Reactive to state changes: Automatically recomposes when state changes

@Composable
fun UserProfile(user: User) {
    Column {
        Text(text = user.name)
        Text(text = user.email)
    }
}

State and MutableState are interfaces that represent observable state in Compose:
State:

• Read-only interface
• Has a value property
• Triggers recomposition when observed
  MutableState:
• Extends State
• Allows modification of the value
• Created using mutableStateOf()
  Property Delegation:
  Compose supports property delegation for cleaner syntax using by keyword.

@Composable
fun StateExample() {
    // Using property delegation
    var count by remember { mutableStateOf(0) }
    // Without delegation
    val countState = remember { mutableStateOf(0) }
    Text("Count: $count") // Using delegated property
    Text("Count: ${countState.value}") // Using state.value
    Button(onClick = { count++ }) { Text("Increment") }
}

Modifiers are a way to decorate or configure Composable elements. They allow you to change appearance, add behavior, handle events, and modify layout.
Key Characteristics:

• Chainable: Multiple modifiers can be chained together
• Order matters: The sequence of modifiers affects the result
• Immutable: Each modifier returns a new Modifier instance
  Common Modifier Categories:
• Layout: size, padding, fillMaxWidth
• Appearance: background, border, clip
• Interaction: clickable, focusable
• Drawing: alpha, rotate, scale

@Composable
fun ModifierExample() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue)
            .padding(16.dp)
            .clickable { /* handle click */ }
            .clip(CircleShape)
    )
}

These are the fundamental layout composables in Compose:
Row:

• Arranges children horizontally
• Supports horizontal arrangement and vertical alignment
• Similar to LinearLayout with horizontal orientation
  Column:
• Arranges children vertically
• Supports vertical arrangement and horizontal alignment
• Similar to LinearLayout with vertical orientation
  Box:
• Stacks children on top of each other
• Supports content alignment
• Similar to FrameLayout

@Composable
fun LayoutExamples() {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("Left")
        Text("Right")
    }
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Top")
        Text("Bottom")
    }
    Box(contentAlignment = Alignment.Center) {
        Text("Background")
        Text("Foreground")
    }
}