package dev.ulfrx.recipe.ui.components.recipe

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import dev.ulfrx.recipe.ui.theme.RecipeTheme

/**
 * Wrapping card used by both the read-only recipe detail and the meal-plan
 * editor to host a list of [IngredientRow]s separated by [IngredientDivider].
 * Surface, border and corner radius are unified so the two screens read as the
 * same widget rendered against different sources of truth.
 */
@Composable
fun IngredientCard(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    val colors = RecipeTheme.colors
    val shape = RoundedCornerShape(CardCornerRadius)
    Column(
        modifier =
            modifier
                .fillMaxWidth()
                .clip(shape)
                .background(colors.surface)
                .border(width = CardBorderWidth, color = colors.borderCard, shape = shape),
    ) {
        content()
    }
}

private val CardCornerRadius = 16.dp
private val CardBorderWidth = 1.dp
