package com.lesharicotsrouge.scoop_app

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.lesharicotsrouge.scoop_app.ui.theme.Scoop_appTheme
import androidx.compose.ui.unit.dp
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.ui.Alignment

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Scoop_appTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CardWithButton()
                }
            }
        }
    }
}

@Composable
fun CardWithButton() {
    // Define the card with padding around it
   Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        // Column inside the Card to stack elements vertically
        Column(
            modifier = Modifier.padding(12.dp).height(10.dp)
        ) {
            Text(
                text = "Card with Button",
            style = MaterialTheme.typography.titleMedium,
            modifier = Modifier.padding(bottom = 8.dp)
            )
            Button(
                onClick = { /* Do something when button clicked */ },
                modifier = Modifier.align(Alignment.CenterHorizontally) // Center the Button
            ) {
                Text("Click me")
            }
        }
    }
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        // Column inside the Card to stack elements vertically
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(
                text = "Card with Button",
            style = MaterialTheme.typography.titleMedium,
            modifier = Modifier.padding(bottom = 8.dp)
            )
            Button(
                onClick = { /* Do something when button clicked */ },
                modifier = Modifier.align(Alignment.CenterHorizontally) // Center the Button
            ) {
                Text("Click me")
            }
        }
    }
}


Je veux une top bar, des cards horizontalles en bas