package com.tt.honeyDue.ui.components.forms

import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.tt.honeyDue.ui.theme.AppSpacing

/**
 * FormSection - Groups related form fields with optional header/footer
 * Matches iOS Section pattern
 *
 * Features:
 * - Consistent spacing between fields
 * - Optional header and footer text
 * - Automatic vertical spacing
 *
 * Usage:
 * ```
 * FormSection(
 *     header = "Personal Information",
 *     footer = "This information is private"
 * ) {
 *     FormTextField(...)
 *     FormTextField(...)
 * }
 * ```
 */
@Composable
fun FormSection(
    modifier: Modifier = Modifier,
    header: String? = null,
    footer: String? = null,
    content: @Composable ColumnScope.() -> Unit
) {
    Column(
        modifier = modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(AppSpacing.md)
    ) {
        // Header
        if (header != null) {
            Text(
                text = header,
                style = MaterialTheme.typography.titleSmall,
                color = MaterialTheme.colorScheme.primary,
                modifier = Modifier.padding(bottom = AppSpacing.xs)
            )
        }

        // Content
        Column(
            verticalArrangement = Arrangement.spacedBy(AppSpacing.md)
        ) {
            content()
        }

        // Footer
        if (footer != null) {
            Text(
                text = footer,
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier.padding(top = AppSpacing.xs)
            )
        }
    }
}
