Core Components

/**
 * High-level element that displays text and provides semantics / accessibility information
 * @param text The text to be displayed
 * @param modifier Modifier to be applied to this layout node
 * @param color Color to apply to the text
 * @param fontSize The size of glyphs to use when painting the text
 * @param fontStyle The typeface variant to use when drawing the letters
 * @param fontWeight The typeface thickness to use when painting the text
 * @param fontFamily The font family to be used when rendering the text
 * @param letterSpacing The amount of space to add between each letter
 * @param textDecoration The decorations to paint on the text
 * @param textAlign The alignment of the text within the lines of the paragraph
 * @param lineHeight Line height for the Paragraph in TextUnit unit
 * @param overflow How visual overflow should be handled
 * @param softWrap Whether the text should break at soft line breaks
 * @param maxLines An optional maximum number of lines for the text to span
 * @param style Style configuration for the text such as color, font, line height etc
 */
@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    style: TextStyle = LocalTextStyle.current
)

// Basic text
Text("Hello, iOS!")

// Styled text with Material theming
Text(
    text = "Material Design on iOS",
    style = MaterialTheme.typography.h5,
    color = MaterialTheme.colors.primary
)

// Text with overflow handling
Text(
    text = "This is a very long text that might overflow",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

/**
 * Material Design button. Buttons allow users to take actions and make choices with a single tap
 * @param onClick Called when this button is clicked
 * @param modifier Modifier to be applied to this button
 * @param enabled Controls the enabled state of this button
 * @param elevation ButtonElevation used to resolve the elevation for this button
 * @param shape Defines the shape of this button's container, border and shadow
 * @param border The border to draw around the container of this button
 * @param colors ButtonColors that will be used to resolve the colors for this button
 * @param contentPadding The spacing values to apply internally between the container and the content
 * @param content The content displayed on the button
 */
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

// Standard button
Button(onClick = { println("Button clicked") }) {
    Text("Click Me")
}

// Button with icon
Button(onClick = { /* handle click */ }) {
    Icon(Icons.Default.Add, contentDescription = null)
    Spacer(Modifier.width(8.dp))
    Text("Add Item")
}

// Disabled button
Button(
    onClick = { },
    enabled = false
) {
    Text("Disabled")
}

// Custom styled button
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        backgroundColor = MaterialTheme.colors.secondary
    ),
    elevation = ButtonDefaults.elevation(8.dp)
) {
    Text("Custom Button")
}

/**
 * Material Design text button. Text buttons are typically used for less important actions
 * @param onClick Called when this button is clicked
 * @param modifier Modifier to be applied to this button
 * @param enabled Controls the enabled state of this button
 * @param elevation ButtonElevation used to resolve the elevation for this button
 * @param shape Defines the shape of this button's container and border
 * @param border The border to draw around the container of this button
 * @param colors ButtonColors that will be used to resolve the colors for this button
 * @param contentPadding The spacing values to apply internally between the container and the content
 * @param content The content displayed on the button
 */
@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    elevation: ButtonElevation? = null,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
    content: @Composable RowScope.() -> Unit
)

/**
 * Material Design outlined button. Outlined buttons are medium-emphasis buttons
 * @param onClick Called when this button is clicked
 * @param modifier Modifier to be applied to this button
 * @param enabled Controls the enabled state of this button
 * @param elevation ButtonElevation used to resolve the elevation for this button
 * @param shape Defines the shape of this button's container and border
 * @param border The border to draw around the container of this button
 * @param colors ButtonColors that will be used to resolve the colors for this button
 * @param contentPadding The spacing values to apply internally between the container and the content
 * @param content The content displayed on the button
 */
@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    elevation: ButtonElevation? = null,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = ButtonDefaults.outlinedBorder,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

/**
 * Material Design icon button. Icon buttons allow users to take actions and make choices with a single tap
 * @param onClick Called when this icon button is clicked
 * @param modifier Modifier to be applied to this icon button
 * @param enabled Controls the enabled state of this icon button
 * @param content The content of this icon button, typically an Icon
 */
@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    content: @Composable () -> Unit
)

// Basic icon button
IconButton(onClick = { /* handle click */ }) {
    Icon(Icons.Default.Menu, contentDescription = "Menu")
}

// Icon button with custom tint
IconButton(onClick = { /* handle back navigation */ }) {
    Icon(
        Icons.AutoMirrored.Filled.ArrowBack,
        contentDescription = "Back",
        tint = MaterialTheme.colors.onSurface
    )
}

/**
 * Material Design floating action button. FABs are used for primary actions on a screen
 * @param onClick Called when this FAB is clicked
 * @param modifier Modifier to be applied to this FAB
 * @param shape Defines the shape of this FAB's container and shadow
 * @param backgroundColor The background color. Use Color.Transparent to have no color
 * @param contentColor The preferred content color provided by this FAB to its children
 * @param elevation FloatingActionButtonElevation used to resolve the elevation for this FAB
 * @param content The content of this FAB - typically an Icon
 */
@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
)

// Standard FAB
FloatingActionButton(
    onClick = { /* add new item */ }
) {
    Icon(Icons.Default.Add, contentDescription = "Add")
}

// Extended FAB with text
ExtendedFloatingActionButton(
    text = { Text("Create") },
    onClick = { /* create action */ },
    icon = { Icon(Icons.Default.Add, contentDescription = null) }
)

/**
 * Material surface. Surface is the central metaphor in material design
 * @param modifier Modifier to be applied to the Surface
 * @param shape Defines the shape of this Surface's container and shadow
 * @param color The background color. Use Color.Transparent to have no color
 * @param contentColor The preferred content color provided by this Surface to its children
 * @param elevation The size of the shadow below the surface
 * @param border Optional border to draw on top of the surface
 * @param content The content to be displayed on top of the surface
 */
@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    elevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
)

// Basic surface with elevation
Surface(
    modifier = Modifier.padding(16.dp),
    elevation = 4.dp,
    shape = RoundedCornerShape(8.dp)
) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text("Surface Content")
        Text("With elevation and rounded corners")
    }
}

// Clickable surface
Surface(
    modifier = Modifier.clickable { /* handle click */ },
    elevation = 2.dp,
    color = MaterialTheme.colors.primary
) {
    Text(
        text = "Clickable Surface",
        modifier = Modifier.padding(16.dp),
        color = MaterialTheme.colors.onPrimary
    )
}

/**
 * Material Design card. Cards contain content and actions about a single subject
 * @param modifier Modifier to be applied to this Card
 * @param shape Defines the shape of this card's container and shadow
 * @param backgroundColor The background color
 * @param contentColor The preferred content color provided by this Card to its children
 * @param border Optional border to draw on top of the card
 * @param elevation The size of the shadow below the card
 * @param content The content to be displayed inside the card
 */
@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
)

// Basic card
Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text(
            text = "Card Title",
            style = MaterialTheme.typography.h6
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text("Card content goes here")
    }
}

// Clickable card with elevation
Card(
    modifier = Modifier
        .fillMaxWidth()
        .clickable { /* handle card click */ },
    elevation = 8.dp
) {
    // Card content
}

/**
 * Material 3 outlined card with border instead of elevation for modern flat design
 * @param onClick Called when this card is clicked
 * @param modifier Modifier to be applied to this card
 * @param enabled Controls the enabled state of this card
 * @param shape Defines the shape of this card's container and border
 * @param colors CardColors that will be used to resolve the colors for this card
 * @param elevation CardElevation used to resolve the elevation for this card
 * @param border The border to draw around the container of this card
 * @param interactionSource The MutableInteractionSource representing the stream of interactions
 * @param content The content to be displayed inside the card
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun OutlinedCard(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.outlinedShape,
    colors: CardColors = CardDefaults.outlinedCardColors(),
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
)

/**
 * Material 3 outlined card without click handling
 * @param modifier Modifier to be applied to this card
 * @param shape Defines the shape of this card's container and border
 * @param colors CardColors that will be used to resolve the colors for this card
 * @param elevation CardElevation used to resolve the elevation for this card
 * @param border The border to draw around the container of this card
 * @param content The content to be displayed inside the card
 */
@Composable
fun OutlinedCard(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.outlinedShape,
    colors: CardColors = CardDefaults.outlinedCardColors(),
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
    content: @Composable ColumnScope.() -> Unit
)

object CardDefaults {
    fun outlinedCardColors(
        containerColor: Color = Color.Transparent,
        contentColor: Color = Color.Unspecified,
        disabledContainerColor: Color = Color.Transparent,
        disabledContentColor: Color = Color.Unspecified
    ): CardColors
    
    fun outlinedCardElevation(
        defaultElevation: Dp = 0.dp,
        pressedElevation: Dp = 0.dp,
        focusedElevation: Dp = 0.dp,
        hoveredElevation: Dp = 0.dp,
        draggedElevation: Dp = 0.dp,
        disabledElevation: Dp = 0.dp
    ): CardElevation
    
    fun outlinedCardBorder(): BorderStroke
    
    val outlinedShape: Shape
}

interface CardColors
interface CardElevation

// Basic outlined card
OutlinedCard(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text(
            text = "Outlined Card",
            style = MaterialTheme.typography.h6
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text("This card uses a border instead of elevation for a modern flat design.")
    }
}

// Clickable outlined card with custom colors
OutlinedCard(
    onClick = { /* handle card click */ },
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    colors = CardDefaults.outlinedCardColors(
        containerColor = MaterialTheme.colorScheme.surfaceVariant,
        contentColor = MaterialTheme.colorScheme.onSurfaceVariant
    ),
    border = BorderStroke(
        width = 2.dp,
        color = MaterialTheme.colorScheme.primary
    )
) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Star,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text("Premium Feature")
        Text(
            text = "Tap to learn more",
            style = MaterialTheme.typography.bodySmall
        )
    }
}

/**
 * Material Design divider. A divider is a thin line that groups content in lists and layouts
 * @param modifier Modifier to be applied to the divider
 * @param color Color of the divider line
 * @param thickness The thickness of the divider line
 * @param startIndent The offset of this line from the start of this layout
 */
@Composable
fun Divider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp,
    startIndent: Dp = 0.dp
)

// Basic divider
Column {
    Text("Item 1")
    Divider()
    Text("Item 2")
    Divider()
    Text("Item 3")
}

// Divider with custom styling
Divider(
    color = MaterialTheme.colors.primary,
    thickness = 2.dp,
    startIndent = 16.dp
)

object ButtonDefaults {
    fun elevation(
        defaultElevation: Dp = 2.dp,
        pressedElevation: Dp = 8.dp,
        disabledElevation: Dp = 0.dp
    ): ButtonElevation
    
    fun buttonColors(
        backgroundColor: Color = MaterialTheme.colors.primary,
        contentColor: Color = contentColorFor(backgroundColor),
        disabledBackgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f),
        disabledContentColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
    ): ButtonColors
    
    val ContentPadding: PaddingValues
    val TextButtonContentPadding: PaddingValues
    val outlinedBorder: BorderStroke?
}

object FloatingActionButtonDefaults {
    fun elevation(
        defaultElevation: Dp = 6.dp,
        pressedElevation: Dp = 12.dp
    ): FloatingActionButtonElevation
}

const val DividerAlpha = 0.12f
}

// Progress indicators
object ProgressIndicatorDefaults {
    val StrokeWidth: Dp = 4.dp
    const val IndicatorBackgroundOpacity: Float = 0.24f
}

// Snackbar defaults
object SnackbarDefaults {
    val backgroundColor: Color
        @Composable
        get() = MaterialTheme.colors.onSurface
    
    val primaryActionColor: Color
        @Composable  
        get() = MaterialTheme.colors.primaryVariant
}

// Type definitions for button components
@Stable
interface ButtonElevation {
    @Composable
    fun elevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
}

@Stable
interface ButtonColors {
    @Composable
    fun backgroundColor(enabled: Boolean): State<Color>
    
    @Composable
    fun contentColor(enabled: Boolean): State<Color>
}

@Stable
interface FloatingActionButtonElevation {
    @Composable
    fun elevation(interactionSource: InteractionSource): State<Dp>
}

// Content alpha values for iOS
object ContentAlpha {
    const val high: Float = 1.00f
    const val medium: Float = 0.74f
    const val disabled: Float = 0.38f
}

/**
 * Material Design circular progress indicator with iOS-appropriate animations
 * @param progress The progress value between 0.0 and 1.0, or null for indeterminate
 * @param modifier Modifier to be applied to this progress indicator
 * @param color The color of the progress indicator
 * @param strokeWidth The stroke width of the progress indicator
 */
@Composable
fun CircularProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
)

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
)

// Indeterminate progress
CircularProgressIndicator()

// Determinate progress
CircularProgressIndicator(
    progress = 0.75f,
    color = MaterialTheme.colors.secondary
)

// Custom size and stroke
CircularProgressIndicator(
    progress = progress,
    modifier = Modifier.size(64.dp),
    strokeWidth = 6.dp
)

/**
 * Material Design linear progress indicator with iOS-style presentation
 * @param progress The progress value between 0.0 and 1.0, or null for indeterminate
 * @param modifier Modifier to be applied to this progress indicator
 * @param color The color of the progress indicator
 * @param backgroundColor The background color of the progress indicator
 */
@Composable
fun LinearProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
)

@Composable
fun LinearProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
)

// Indeterminate linear progress
LinearProgressIndicator(
    modifier = Modifier.fillMaxWidth()
)

// Determinate linear progress
LinearProgressIndicator(
    progress = downloadProgress,
    modifier = Modifier.fillMaxWidth()
)

// Custom colored progress
LinearProgressIndicator(
    progress = uploadProgress,
    modifier = Modifier.fillMaxWidth(),
    color = MaterialTheme.colors.secondary,
    backgroundColor = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
)

/**
 * Material Design snackbar with iOS safe area integration
 * @param snackbarData Data about the current snackbar to display
 * @param modifier Modifier to be applied to this snackbar
 * @param actionOnNewLine Whether the action should be displayed on a separate line
 * @param shape The shape of the snackbar
 * @param backgroundColor The background color of the snackbar
 * @param contentColor The content color of the snackbar
 * @param actionColor The color of the action text/button
 * @param elevation The elevation of the snackbar
 */
@Composable
fun Snackbar(
    snackbarData: SnackbarData,
    modifier: Modifier = Modifier,
    actionOnNewLine: Boolean = false,
    shape: Shape = MaterialTheme.shapes.small,
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
    contentColor: Color = MaterialTheme.colors.surface,
    actionColor: Color = SnackbarDefaults.primaryActionColor,
    elevation: Dp = 6.dp
)

/**
 * Host component for displaying snackbars with iOS positioning
 * @param hostState State controlling snackbar display
 * @param modifier Modifier to be applied to this host
 * @param snackbar The snackbar composable to display
 */
@Composable
fun SnackbarHost(
    hostState: SnackbarHostState,
    modifier: Modifier = Modifier,
    snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) }
)

@Stable
class SnackbarHostState {
    suspend fun showSnackbar(
        message: String,
        actionLabel: String? = null,
        duration: SnackbarDuration = SnackbarDuration.Short
    ): SnackbarResult
}

interface SnackbarData {
    val message: String
    val actionLabel: String?
    fun performAction()
    fun dismiss()
}

enum class SnackbarDuration {
    Short, Long, Indefinite
}

enum class SnackbarResult {
    Dismissed, ActionPerformed
}

// Basic snackbar usage
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) }
) { paddingValues ->
    Button(
        onClick = {
            scope.launch {
                snackbarHostState.showSnackbar("Hello, iOS!")
            }
        }
    ) {
        Text("Show Snackbar")
    }
}

// Snackbar with action
scope.launch {
    val result = snackbarHostState.showSnackbar(
        message = "Item deleted",
        actionLabel = "UNDO",
        duration = SnackbarDuration.Long
    )
    when (result) {
        SnackbarResult.ActionPerformed -> {
            // Handle undo
        }
        SnackbarResult.Dismissed -> {
            // Handle dismissal
        }
    }
}

/**
 * Material Design alert dialog with iOS-optimized presentation
 * @param onDismissRequest Called when the user tries to dismiss the dialog
 * @param buttons The content of the dialog's buttons, usually arranged horizontally
 * @param modifier Modifier to be applied to this dialog
 * @param title The optional title of the dialog
 * @param text The optional text body of the dialog
 * @param shape Defines the shape of this dialog's container
 * @param backgroundColor The background color of the dialog
 * @param contentColor The preferred content color provided by this dialog to its children
 * @param properties DialogProperties for further customization
 */
@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    buttons: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties = DialogProperties()
)

/**
 * Material Design alert dialog with confirmButton and dismissButton
 * @param onDismissRequest Called when the user tries to dismiss the dialog
 * @param confirmButton The button which is meant to confirm a proposed action
 * @param modifier Modifier to be applied to this dialog
 * @param dismissButton The button which is meant to dismiss the dialog
 * @param title The optional title of the dialog
 * @param text The optional text body of the dialog
 * @param shape Defines the shape of this dialog's container
 * @param backgroundColor The background color of the dialog
 * @param contentColor The preferred content color provided by this dialog to its children
 * @param properties DialogProperties for further customization
 */
@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties = DialogProperties()
)

@Stable
class DialogProperties(
    val dismissOnBackPress: Boolean = true,
    val dismissOnClickOutside: Boolean = true,
    val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
    val usePlatformDefaultWidth: Boolean = true
)

enum class SecureFlagPolicy {
    Inherit, SecureOn, SecureOff
}

// Simple confirmation dialog
var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = { Text("Confirm Action") },
        text = { Text("Are you sure you want to delete this item?") },
        confirmButton = {
            TextButton(
                onClick = {
                    showDialog = false
                    // Perform delete action
                }
            ) {
                Text("DELETE")
            }
        },
        dismissButton = {
            TextButton(
                onClick = { showDialog = false }
            ) {
                Text("CANCEL")
            }
        }
    )
}

// Custom content dialog
AlertDialog(
    onDismissRequest = { /* handle dismiss */ },
    buttons = {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.End
        ) {
            TextButton(onClick = { /* handle cancel */ }) {
                Text("CANCEL")
            }
            Spacer(modifier = Modifier.width(8.dp))
            TextButton(onClick = { /* handle save */ }) {
                Text("SAVE")
            }
        }
    },
    title = { Text("Edit Profile") },
    text = {
        Column {
            TextField(
                value = name,
                onValueChange = { name = it },
                label = { Text("Name") }
            )
            Spacer(modifier = Modifier.height(8.dp))
            TextField(
                value = email,
                onValueChange = { email = it },
                label = { Text("Email") }
            )
        }
    }
)