// Created on savesnippets.com · https://savesnippets.com/puWQsvxneXfcHu
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun Card(label: String, onClick: () -> Unit) {
    Text(
        text = label,
        modifier = Modifier
            .fillMaxWidth()                    // 1. take full width
            .padding(horizontal = 16.dp)       // 2. then add outer padding
            .clip(RoundedCornerShape(12.dp))   // 3. then clip to rounded shape
            .background(Color.LightGray)       // 4. then fill background
            .clickable(onClick = onClick)      // 5. then add click handler
            .padding(16.dp)                    // 6. inner padding (inside the bg)
    )
}

// ⚠️ Order matters!
//    .padding(16.dp).background(Color.Red)   → padding is OUTSIDE the red bg
//    .background(Color.Red).padding(16.dp)   → padding is INSIDE the red bg