@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Accordion" Code="@_codeAccordionBasic">
    <Accordion Class="w-full max-w-md">
        <AccordionItem Value="item-1">
            <AccordionTrigger>Is it accessible?</AccordionTrigger>
            <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
        </AccordionItem>
        <AccordionItem Value="item-2">
            <AccordionTrigger>Is it styled?</AccordionTrigger>
            <AccordionContent>Yes. It comes with default styles that match your theme.</AccordionContent>
        </AccordionItem>
        <AccordionItem Value="item-3">
            <AccordionTrigger>Is it animated?</AccordionTrigger>
            <AccordionContent>Yes. It's animated by default using CSS transitions.</AccordionContent>
        </AccordionItem>
    </Accordion>
</PatternCard>

<PatternCard Label="Multiple Open" Code="@_codeAccordionMultiple">
    <Accordion Type="Accordion.AccordionType.Multiple" Class="w-full max-w-md">
        <AccordionItem Value="a">
            <AccordionTrigger>Section One</AccordionTrigger>
            <AccordionContent>Content for section one. Multiple sections can be open simultaneously.</AccordionContent>
        </AccordionItem>
        <AccordionItem Value="b">
            <AccordionTrigger>Section Two</AccordionTrigger>
            <AccordionContent>Content for section two.</AccordionContent>
        </AccordionItem>
    </Accordion>
</PatternCard>

<PatternCard Label="Compact FAQ" Code="@_codeAccordionFaq">
    <Accordion Class="w-full max-w-md text-sm">
        <AccordionItem Value="q1">
            <AccordionTrigger>What is Lumeo?</AccordionTrigger>
            <AccordionContent>Lumeo is a Blazor component library inspired by shadcn/ui.</AccordionContent>
        </AccordionItem>
        <AccordionItem Value="q2">
            <AccordionTrigger>How do I install it?</AccordionTrigger>
            <AccordionContent>Install via NuGet: <code class="font-mono bg-muted px-1 rounded">dotnet add package Lumeo</code></AccordionContent>
        </AccordionItem>
    </Accordion>
</PatternCard>
</Stack>

@code {
        private string _codeAccordionBasic = @"<Accordion>
        <AccordionItem Value=""item-1"">
            <AccordionTrigger>Is it accessible?</AccordionTrigger>
            <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
        </AccordionItem>
        <AccordionItem Value=""item-2"">
            <AccordionTrigger>Is it styled?</AccordionTrigger>
            <AccordionContent>Yes. It comes with default styles that match your theme.</AccordionContent>
        </AccordionItem>
    </Accordion>";

        private string _codeAccordionMultiple = @"<Accordion Type=""Accordion.AccordionType.Multiple"">
        <AccordionItem Value=""a"">
            <AccordionTrigger>Section One</AccordionTrigger>
            <AccordionContent>Content for section one.</AccordionContent>
        </AccordionItem>
        <AccordionItem Value=""b"">
            <AccordionTrigger>Section Two</AccordionTrigger>
            <AccordionContent>Content for section two.</AccordionContent>
        </AccordionItem>
    </Accordion>";

        private string _codeAccordionFaq = @"<Accordion Class=""text-sm"">
        <AccordionItem Value=""q1"">
            <AccordionTrigger>What is Lumeo?</AccordionTrigger>
            <AccordionContent>Lumeo is a Blazor component library inspired by shadcn/ui.</AccordionContent>
        </AccordionItem>
        <AccordionItem Value=""q2"">
            <AccordionTrigger>How do I install it?</AccordionTrigger>
            <AccordionContent>Install via NuGet: dotnet add package Lumeo</AccordionContent>
        </AccordionItem>
    </Accordion>";
}
