package com.example.cardspaises

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import java.text.DecimalFormat



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Listado(paises = paises)
        }
    }
}


data class Pais(val nombre: String, val cantidadHabitantes: Int, val bandera: Int)

val paises = listOf<Pais>(
    Pais("Argentina", 44000000, R.drawable.argentina),
    Pais("Brasil", 211000000, R.drawable.brazil),
    Pais("Colombia", 50000000, R.drawable.colombia),
    Pais("Peru", 10000000, R.drawable.peru),
    Pais("Chile", 7000000, R.drawable.chile)

)

@Composable
fun Listado(paises: List<Pais>) {
    LazyColumn {
        items(paises) { pais ->
            Tarjeta(pais)
        }
    }
}

@Composable
fun Tarjeta(pais: Pais) {
    Card(
        elevation = CardDefaults.cardElevation(defaultElevation = 5.dp),
        modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth()
    ) {
        Row(modifier = Modifier.padding(6.dp)) {
            Image(
                painter = painterResource(id = pais.bandera),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.size(64.dp)
            )
            Spacer(modifier = Modifier.width(10.dp))
            Column() {
                Text(
                    text = pais.nombre,
                    style = MaterialTheme.typography.headlineSmall
                )
                Text(
                    text = "${DecimalFormat("###,###,###").format(pais.cantidadHabitantes)} habitantes",
                    style = MaterialTheme.typography.bodyMedium
                )
            }

        }
    }
}