package app.closer.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Image
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import app.closer.ui.theme.CloserPalette

/**
 * Visual placeholder for an illustration that hasn't been generated yet.
 *
 * Renders an on-brand pastel card showing the expected drawable name and dimensions so the
 * slot is obvious in the UI. When the real asset lands, swap this for:
 *   `Image(painterResource(R.drawable.<assetName>), contentDescription = null, modifier = ...)`
 *
 * @param assetName the intended drawable resource name (e.g. "celebration_reveal_hero").
 * @param sizeHint human-readable source size (e.g. "1024×1024").
 */
@Composable
fun IllustrationPlaceholder(
    assetName: String,
    sizeHint: String,
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            .clip(RoundedCornerShape(24.dp))
            .background(CloserPalette.PurpleSoft),
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Icon(
                imageVector = Icons.Filled.Image,
                contentDescription = null,
                tint = CloserPalette.PurpleRich,
                modifier = Modifier.size(40.dp)
            )
            Text(
                text = assetName,
                style = MaterialTheme.typography.labelMedium,
                color = CloserPalette.PurpleDeep,
                textAlign = TextAlign.Center
            )
            Text(
                text = sizeHint,
                style = MaterialTheme.typography.labelSmall,
                color = CloserPalette.PurpleRich,
                textAlign = TextAlign.Center
            )
        }
    }
}
