// Link to Figma with key SVGs
// https://www.figma.com/community/file/1523256749938041908

@Composable
fun KeyboardKey3D(
    label: String,
    modifier: Modifier = Modifier,
) {
    var isPressed by remember { mutableStateOf(false) }

    val keyOffset by animateDpAsState(
        targetValue = if (isPressed) 80.dp else 0.dp,
        animationSpec = spring(
            dampingRatio = 0.5f,
        )
    )

    Box(
        modifier = modifier
            .fillMaxSize()
            .clickable(
                onClick = { /* action */ },
                onClickLabel = "Key Press"
            )
            .pointerInput(Unit) {
                detectTapGestures(
                    onPress = {
                        isPressed = true
                        tryAwaitRelease()
                        isPressed = false
                    }
                )
            }
    ) {
        Image(
            modifier = Modifier.align(Center),
            painter = painterResource(R.drawable.button_base),
            contentDescription = "Background",
        )
        Box(
            modifier = Modifier
                .align(Center)
                .padding(bottom = 70.dp)
                .graphicsLayer(
                    translationY = keyOffset.value
                ),
        ) {
            Image(

                painter = painterResource(R.drawable.button),
                contentDescription = "Logo",

                )
            Text(
                text = label,
                modifier = Modifier
                    .align(Center)
                    .padding(bottom = 110.dp)
                    .padding(end = 20.dp)
                    .graphicsLayer {
                        rotationX = 40f
                        rotationY = -10f
                        rotationZ = 30f
                    },
                color = Color.White,
                style = androidx.compose.ui.text.TextStyle(
                    fontSize = 36.sp,
                    fontWeight = FontWeight.Bold
                )
            )
        }
        Image(
            modifier = Modifier.align(Center),
            painter = painterResource(R.drawable.base_front),
            contentDescription = null,
        )
    }
}