Accordion

use leptos::prelude::*;

use crate::components::ui::accordion::{
    Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTitle,
};

#[component]
pub fn DemoAccordion() -> impl IntoView {
    const DEMO_TEXT_ACCORDION: &str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim diam ac enim finibus, ut luctus est porttitor. Etiam ultrices turpis tellus.";

    let active_accordion = RwSignal::new(0u8);

    let toggle_accordion = move |num: u8| {
        active_accordion.update(|current| {
            *current = if *current == num { 0 } else { num };
        });
    };

    view! {
        <Accordion class="max-w-[500px]">
            <AccordionItem class:active=move || active_accordion.get() == 1>
                <AccordionHeader on:click=move |_| toggle_accordion(1)>
                    <AccordionTitle>Section 1</AccordionTitle>
                </AccordionHeader>
                <AccordionContent>
                    <p>{DEMO_TEXT_ACCORDION}</p>
                </AccordionContent>
            </AccordionItem>

            <AccordionItem class:active=move || active_accordion.get() == 2>
                <AccordionHeader on:click=move |_| toggle_accordion(2)>
                    <AccordionTitle>Section 2</AccordionTitle>
                </AccordionHeader>
                <AccordionContent>
                    <p>{DEMO_TEXT_ACCORDION}</p>
                </AccordionContent>
            </AccordionItem>

            <AccordionItem class:active=move || active_accordion.get() == 3>
                <AccordionHeader on:click=move |_| toggle_accordion(3)>
                    <AccordionTitle>Section 3</AccordionTitle>
                </AccordionHeader>
                <AccordionContent>
                    <p>{DEMO_TEXT_ACCORDION}</p>
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    }
}