@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeCollapsibleDefault">
    <Collapsible @bind-Open="_collapsible1Open" Class="w-full max-w-sm space-y-2">
        <Flex Align="center" Justify="between">
            <Lumeo.Text Size="sm" Weight="semibold" Color="foreground">Repositories</Lumeo.Text>
            <CollapsibleTrigger>
                <Button Variant="Button.ButtonVariant.Ghost" Class="h-8 w-8 p-0">
                    <DynamicIcon Name="ChevronsUpDown" Class="h-4 w-4" />
                </Button>
            </CollapsibleTrigger>
        </Flex>
        <Lumeo.Text Size="sm" Color="foreground" Class="rounded-md border border-border px-4 py-2">lumeo</Lumeo.Text>
        <CollapsibleContent>
            <Stack Gap="2" Class="mt-2">
                <Lumeo.Text Size="sm" Color="foreground" Class="rounded-md border border-border px-4 py-2">blazicons</Lumeo.Text>
                <Lumeo.Text Size="sm" Color="foreground" Class="rounded-md border border-border px-4 py-2">tailwindcss-v4</Lumeo.Text>
            </Stack>
        </CollapsibleContent>
    </Collapsible>
</PatternCard>
<PatternCard Label="Panel Style" Code="@_codeCollapsiblePanel">
    <Collapsible @bind-Open="_collapsible2Open" Class="w-full max-w-sm border border-border rounded-lg overflow-hidden">
        <CollapsibleTrigger Class="w-full">
            <Flex Align="center" Justify="between" Class="px-4 py-3 hover:bg-accent/50 transition-colors">
                <Lumeo.Text As="span" Size="sm" Weight="medium" Color="foreground">Advanced Settings</Lumeo.Text>
                <Blazicon Svg="@(_collapsible2Open ? Lucide.ChevronUp : Lucide.ChevronDown)" class="h-4 w-4 text-muted-foreground" />
            </Flex>
        </CollapsibleTrigger>
        <CollapsibleContent>
            <Stack Gap="2" Class="border-t border-border px-4 py-3">
                <Flex Align="center" Justify="between">
                    <Label Class="text-xs">Enable analytics</Label>
                    <Switch />
                </Flex>
                <Flex Align="center" Justify="between">
                    <Label Class="text-xs">Dark mode</Label>
                    <Switch />
                </Flex>
            </Stack>
        </CollapsibleContent>
    </Collapsible>
</PatternCard>
</Stack>

@code {
    private bool _collapsible1Open;

    private bool _collapsible2Open;

        private string _codeCollapsibleDefault = @"<Collapsible @bind-Open=""_open"">
        <CollapsibleTrigger>
            <Button Variant=""Button.ButtonVariant.Ghost"" Class=""h-8 w-8 p-0"">
                <Blazicon Svg=""Lucide.ChevronsUpDown"" class=""h-4 w-4"" />
            </Button>
        </CollapsibleTrigger>
        <CollapsibleContent>
            <div>Hidden content here</div>
        </CollapsibleContent>
    </Collapsible>";

        private string _codeCollapsiblePanel = @"<Collapsible @bind-Open=""_open"" Class=""border border-border rounded-lg overflow-hidden"">
        <CollapsibleTrigger Class=""w-full"">
            <div class=""flex items-center justify-between px-4 py-3 hover:bg-accent/50"">
                <span class=""text-sm font-medium"">Advanced Settings</span>
                <Blazicon Svg=""Lucide.ChevronDown"" class=""h-4 w-4"" />
            </div>
        </CollapsibleTrigger>
        <CollapsibleContent>
            <div class=""border-t px-4 py-3"">
                <div class=""flex items-center justify-between"">
                    <Label>Enable analytics</Label>
                    <Switch />
                </div>
            </div>
        </CollapsibleContent>
    </Collapsible>";
}
