<Accordion>
    <AccordionItem Title="Item 1">
        This is the content for the first accordion item.
    </AccordionItem>
    <AccordionItem Title="Item 2">
        This is the content for the second accordion item.
    </AccordionItem>
    <AccordionItem Title="Item 3">
        This is the content for the third accordion item.
    </AccordionItem>
</Accordion>

<Accordion>
    <AccordionItem Title="Settings" Icon="Lucide.Settings">
        Configure your application settings and preferences here.
    </AccordionItem>
    <AccordionItem Title="Notifications" Icon="Lucide.Bell">
        Manage your notification preferences and alerts.
    </AccordionItem>
    <AccordionItem Title="Security" Icon="Lucide.Lock">
        Update your password and security settings.
    </AccordionItem>
</Accordion>

<Accordion Multiple="true">
    <AccordionItem Title="Feature One">
        <p>You can have multiple items open at the same time.</p>
        <p>This allows users to compare different sections.</p>
    </AccordionItem>
    <AccordionItem Title="Feature Two">
        <p>Set the Multiple parameter to true for this behavior.</p>
    </AccordionItem>
    <AccordionItem Title="Feature Three">
        <p>By default, Multiple is false for single-open behavior.</p>
    </AccordionItem>
</Accordion>

<Accordion>
    <AccordionItem Title="Complex Content">
        <div class="space-y-4">
            <p>Accordion items can contain any HTML content:</p>
            <ul class="list-disc list-inside space-y-2">
                <li>Lists and text</li>
                <li>Buttons and links</li>
                <li>Forms and inputs</li>
                <li>Other components</li>
            </ul>
            <button class="px-4 py-2 bg-primary-default text-white rounded hover:bg-primary-hover">
                Action Button
            </button>
        </div>
    </AccordionItem>
    <AccordionItem Title="Another Section">
        <p>Rich HTML content works perfectly inside the accordion panel.</p>
    </AccordionItem>
</Accordion>

<Accordion>
    <AccordionItem Title="Closed Item">
        This item starts closed.
    </AccordionItem>
    <AccordionItem Title="Open Item" IsOpen="true">
        This item starts open by default.
    </AccordionItem>
    <AccordionItem Title="Another Closed Item">
        This item is also closed by default.
    </AccordionItem>
</Accordion>

<Accordion>
    <AccordionItem Title="Item with Events" IsOpenChanged="@OnToggle">
        <p>This items fires a callback when toggled.</p>
        <p>Check the code-behind for the OnToggle method.</p>
    </AccordionItem>
</Accordion>

@code {
    private async Task OnToggle(bool isOpen)
    {
        Console.WriteLine($"Accordion toggled: {(isOpen ? "Opened" : "Closed")}");
        // Handle your logic here
    }
}