#[component]
pub fn Item(
    index: usize,
    children: ChildrenFn,
    #[prop(into, optional)] class: String,
) -> impl IntoView {
    let main_ctx = expect_context::<AccordionContext>();

    let ctx = AccordionItemContext {
        index,
        open: create_rw_signal(false),
    };

    main_ctx.items.update(|items| {
        items.push(ctx.clone());
    });

    view! {
        <Provider value={ctx}>
            <div class={class}>{children()}</div>
        </Provider>
    }
}

#[derive(Clone)]
pub struct AccordionItemContext {
    pub index: usize,
    pub open: RwSignal<bool>,
}

#[derive(Clone)]
pub struct AccordionContext {
    pub items: RwSignal<Vec<AccordionItemContext>>,
}

#[component]
pub fn Root(children: ChildrenFn, #[prop(into, optional)] class: String) -> impl IntoView {
    let ctx = AccordionContext {
        items: create_rw_signal(Vec::new()),
    };

    view! {
        <Provider value={ctx}>
            <div class={class}>{children()}</div>
        </Provider>
    }
}

#[component]
pub fn App() -> impl IntoView {

    let items = [
        ("What is the meaning of life?", "To become a better person, to help others, and to leave the world a better place than you found it."),
        ("How do I become a better person?", "Read books, listen to podcasts, and surround yourself with people who inspire you."),
        ("What is the best way to help others?", "Give them your time, attention, and love."),
    ];

    view! {
        <Root>
            {items
                .into_iter()
                .enumerate()
                .map(|(index, (title, content))| {
                    view! {
                        <Item index={index} class="item">
                            <Trigger class="trigger">
                                {title}
                            </Trigger>
                            <Content hide_delay={Duration::from_millis(200)}>
                                {content}
                            </Content>
                        </Item>
                    }
                })
                .collect::<Vec<_>>()}
                <CloseAll />
        </Root>
    }
}