@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Single Select" Code="@_codeToggleGroupSingle">
    <ToggleGroup Type="ToggleGroup.ToggleGroupType.Single">
        <ToggleGroupItem Value="left">
            <DynamicIcon Name="AlignLeft" Class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem Value="center">
            <DynamicIcon Name="AlignCenter" Class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem Value="right">
            <DynamicIcon Name="AlignRight" Class="h-4 w-4" />
        </ToggleGroupItem>
    </ToggleGroup>
</PatternCard>

<PatternCard Label="Multiple Select" Code="@_codeToggleGroupMultiple">
    <ToggleGroup Type="ToggleGroup.ToggleGroupType.Multiple">
        <ToggleGroupItem Value="bold">
            <DynamicIcon Name="Bold" Class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem Value="italic">
            <DynamicIcon Name="Italic" Class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem Value="underline">
            <DynamicIcon Name="Underline" Class="h-4 w-4" />
        </ToggleGroupItem>
    </ToggleGroup>
</PatternCard>
</Stack>

@code {
        private string _codeToggleGroupSingle = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Single"">
        <ToggleGroupItem Value=""left"">
            <Blazicon Svg=""Lucide.AlignLeft"" class=""h-4 w-4"" />
        </ToggleGroupItem>
        <ToggleGroupItem Value=""center"">
            <Blazicon Svg=""Lucide.AlignCenter"" class=""h-4 w-4"" />
        </ToggleGroupItem>
        <ToggleGroupItem Value=""right"">
            <Blazicon Svg=""Lucide.AlignRight"" class=""h-4 w-4"" />
        </ToggleGroupItem>
    </ToggleGroup>";

        private string _codeToggleGroupMultiple = @"<ToggleGroup Type=""ToggleGroup.ToggleGroupType.Multiple"">
        <ToggleGroupItem Value=""bold"">
            <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
        </ToggleGroupItem>
        <ToggleGroupItem Value=""italic"">
            <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
        </ToggleGroupItem>
        <ToggleGroupItem Value=""underline"">
            <Blazicon Svg=""Lucide.Underline"" class=""h-4 w-4"" />
        </ToggleGroupItem>
    </ToggleGroup>";
}
