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

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import dev.ulfrx.recipe.ui.theme.RecipeTheme

/** Uppercase muted label used as a section header across recipe-domain screens. */
@Composable
fun SectionTitle(text: String) {
    BasicText(
        text = text.uppercase(),
        style =
            RecipeTheme.typography.label.copy(
                color = RecipeTheme.colors.contentMuted,
                fontSize = SectionHeaderTextSize,
                letterSpacing = SectionHeaderTracking,
                fontWeight = FontWeight.Bold,
            ),
    )
}

/**
 * Section title stacked on top of [content] with a fixed `spacing.lg` gap —
 * the canonical "header + body" rhythm of the recipe detail and meal-plan
 * editor sheets.
 */
@Composable
fun Section(
    title: String,
    content: @Composable () -> Unit,
) {
    SectionTitle(text = title)
    Spacer(Modifier.height(RecipeTheme.spacing.lg))
    content()
}

private val SectionHeaderTextSize = 11.sp
private val SectionHeaderTracking = 1.sp
