@Composable
fun BasicUsage() {
    var state by remember { mutableStateOf(true) }
    HeartSwitch(
        checked = state,
        onCheckedChange = { state = it },
    )
}

@Composable
fun AdvancedUsage() {
    var state by remember { mutableStateOf(true) }
    HeartSwitch(
        checked = state,
        onCheckedChange = { state = it },
        modifier = Modifier,
        colors = HeartSwitchColors(
            checkedTrackColor = Color(0xFFE91E63),
            checkedTrackBorderColor = Color(0xFFC2185B),
            uncheckedTrackBorderColor = Color(0xFFBDBDBD)
        ),
        width = 34.dp,
        borderWidth = 2.1.dp,
        movementAnimSpec = spring(stiffness = Spring.StiffnessMediumLow),
        colorsAnimSpec = spring(stiffness = Spring.StiffnessMediumLow),
        thumb = { modifier, color ->
            Box(
                modifier = modifier
                    .shadow(12.dp, CircleShape)
                    .background(color.value, CircleShape)
            )
        },
        enabled = true,
        interactionSource = remember { MutableInteractionSource() },
    )
}

data class HeartSwitchColors(
    val checkedThumbColor: Color = Color.White,
    val checkedTrackColor: Color = Color(0xffff708f),
    val checkedTrackBorderColor: Color = Color(0xffff4e74),
    val uncheckedThumbColor: Color = Color.White,
    val uncheckedTrackColor: Color = Color.White,
    val uncheckedTrackBorderColor: Color = Color(0xffd1d1d1),
)

@Composable
fun Thumb(modifier: Modifier, color: State<Color>) = Box(
    modifier = modifier
        .shadow(6.dp, CircleShape)
        .background(color.value, CircleShape)
)