package com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.EaseOutCirc
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.pixelized.desktop.lwa.ui.theme.lwa

@Composable
fun BloodOverlay(
    modifier: Modifier = Modifier,
    bloodColor: Color = MaterialTheme.lwa.colorScheme.portrait.blood,
    damagePercent: Float,
) {
    val animatedRatio = animateFloatAsState(
        targetValue = damagePercent,
        animationSpec = tween(durationMillis = 350, easing = EaseOutCirc)
    )
    val animatedColor = animateColorAsState(
        targetValue = bloodColor.copy(alpha = damagePercent / 4f + .25f)
    )
    Box(
        modifier = modifier
            .fillMaxWidth()
            .fillMaxHeight(fraction = animatedRatio.value)
            .background(color = animatedColor.value)
    )
}