Accordions

LazyColumn {
    item {
        var expanded by remember { mutableStateOf(false) }
        val degrees by animateFloatAsState(if (expanded) -90f else 90f)
        Column {
            Row(modifier = Modifier.clip(ComposeTheme.shapes.roundL).clickable { expanded = expanded.not() }
                .fillMaxWidth().padding(16.dp), horizontalArrangement = Arrangement.SpaceBetween) {
                BasicText("How do I create a new account?", style = ComposeTheme.textStyles.base)
                Image(
                    Lucide.ChevronRight,
                    contentDescription = null,
                    modifier = Modifier.rotate(degrees),
                    colorFilter = ColorFilter.tint(ComposeTheme.colors.gray800)
                )
            }
            AnimatedVisibility(
                visible = expanded,
                enter = expandVertically(
                    spring(
                        stiffness = Spring.StiffnessMediumLow,
                        visibilityThreshold = IntSize.VisibilityThreshold
                    )
                ),
                exit = shrinkVertically()
            ) {
                Box(Modifier.fillMaxWidth().padding(16.dp)) {
                    BasicText(
                        "To create a new account, please follow these steps:\n\n" + "1. Open the app.\n" + "2. Tap on the 'Sign Up' button.\n" + "3. Fill in your details, including your name, email address, and password.\n" + "4. Click 'Create Account'.\n" + "5. You will receive a confirmation email to verify your account. Follow the instructions in the email to complete the registration process.",
                        style = ComposeTheme.textStyles.sm
                    )
                }
            }
            Box(Modifier.fillMaxWidth().height(1.dp).background(ComposeTheme.colors.gray100))
        }
    }
    item {
        var expanded by remember { mutableStateOf(false) }
        val degrees by animateFloatAsState(if (expanded) -90f else 90f)
        Column {
            Row(modifier = Modifier.clip(ComposeTheme.shapes.roundL).clickable { expanded = expanded.not() }
                .fillMaxWidth().padding(16.dp), horizontalArrangement = Arrangement.SpaceBetween) {
                BasicText("How can I reset my password?", style = ComposeTheme.textStyles.base)
                Image(
                    Lucide.ChevronRight,
                    contentDescription = null,
                    modifier = Modifier.rotate(degrees).size(24.dp)
                )
            }
            AnimatedVisibility(
                visible = expanded,
                enter = expandVertically(
                    spring(
                        stiffness = Spring.StiffnessMediumLow,
                        visibilityThreshold = IntSize.VisibilityThreshold
                    )
                ),
                exit = shrinkVertically()
            ) {
                Box(Modifier.fillMaxWidth().padding(16.dp)) {
                    BasicText(
                        "If you need to reset your password, here's what you should do:\n" + "1. On the app's login screen, tap on the 'Forgot Password?' link.\n" + "2. Enter your registered email address.\n" + "3. You will receive an email with a password reset link.\n" + "4. Click on the link and follow the instructions to reset your password.\n" + "5. Once your password is reset, you can log in with your new password.",
                        style = ComposeTheme.textStyles.sm
                    )
                }
            }
            Box(Modifier.fillMaxWidth().height(1.dp).background(ComposeTheme.colors.gray100))
        }
    }
    item {
        var expanded by remember { mutableStateOf(false) }
        val degrees by animateFloatAsState(if (expanded) -90f else 90f)
        Column {
            Row(modifier = Modifier.clip(ComposeTheme.shapes.roundL).clickable { expanded = expanded.not() }
                .fillMaxWidth().padding(16.dp), horizontalArrangement = Arrangement.SpaceBetween) {
                BasicText("How do I update my profile information?", style = ComposeTheme.textStyles.base)
                Image(
                    Lucide.ChevronRight,
                    contentDescription = null,
                    modifier = Modifier.rotate(degrees).size(24.dp)
                )
            }
            AnimatedVisibility(
                visible = expanded,
                enter = expandVertically(
                    spring(
                        stiffness = Spring.StiffnessMediumLow,
                        visibilityThreshold = IntSize.VisibilityThreshold
                    )
                ),
                exit = shrinkVertically()
            ) {
                Box(Modifier.fillMaxWidth().padding(16.dp)) {
                    BasicText(
                        "To update your profile information, please follow these steps:\n" + "1. Log in to your account.\n" + "2. Go to the 'Profile' section of the app.\n" + "3. Click on the 'Edit Profile' button.\n" + "4. Update the information you want to change, such as your name, profile picture, or contact details.\n" + "5. Click 'Save' to save your changes.\n" + "Your profile information will be updated accordingly.",
                        style = ComposeTheme.textStyles.sm
                    )
                }
            }
        }
    }
}

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}