item.kt

@Composable
fun CharacterItem(
    character: Character,
    modifier: Modifier = Modifier,
    onClick: (Character) -> Unit = {}
) {
    Surface(
        modifier = modifier.padding(PaddingValues(2.dp)),
        color = colorResource(id = R.color.transparent),
    ) {
        ConstraintLayout(
            modifier = modifier
                .clip(RoundedCornerShape(4.dp))
                .background(color = colorResource(id = R.color.background))
                .clickable { onClick.invoke(character) }
        ) {
            val (image, name) = createRefs()
            Image(
                modifier = Modifier
                    .constrainAs(image) {
                        linkTo(
                            start = parent.start,
                            top = parent.top,
                            end = parent.end,
                            bottom = name.top
                        )
                        width = Dimension.fillToConstraints
                        height = Dimension.fillToConstraints
                    },
                painter = rememberCoilPainter(
                    request = character.image,
                    fadeIn = true
                ),
                contentDescription = "",
                contentScale = ContentScale.FillBounds
            )
            Text(
                modifier = Modifier
                    .constrainAs(name) {
                        linkTo(
                            start = parent.start,
                            end = parent.end,
                            top = image.bottom,
                            bottom = parent.bottom
                        )
                        width = Dimension.fillToConstraints
                        height = Dimension.wrapContent
                    },
                text = character.name,
                color = colorResource(id = R.color.white),
                textAlign = TextAlign.Center,
                fontSize = 16.sp,
                fontFamily = FontFamily(Font(R.font.girassol_regular))
            )
        }
    }
}