@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeButtonDefault">
    <Button>Button</Button>
</PatternCard>

<PatternCard Label="Secondary" Code="@_codeButtonSecondary">
    <Button Variant="Button.ButtonVariant.Secondary">Secondary</Button>
</PatternCard>

<PatternCard Label="Destructive" Code="@_codeButtonDestructive">
    <Button Variant="Button.ButtonVariant.Destructive">Destructive</Button>
</PatternCard>

<PatternCard Label="Outline" Code="@_codeButtonOutline">
    <Button Variant="Button.ButtonVariant.Outline">Outline</Button>
</PatternCard>

<PatternCard Label="Ghost" Code="@_codeButtonGhost">
    <Button Variant="Button.ButtonVariant.Ghost">Ghost</Button>
</PatternCard>

<PatternCard Label="Link" Code="@_codeButtonLink">
    <Button Variant="Button.ButtonVariant.Link">Link</Button>
</PatternCard>

<PatternCard Label="Icon Only" Code="@_codeButtonIcon">
    <Button Variant="Button.ButtonVariant.Outline" Class="h-9 w-9 p-0">
        <DynamicIcon Name="Plus" Class="h-4 w-4" />
    </Button>
</PatternCard>

<PatternCard Label="Loading State" Code="@_codeButtonLoading">
    <Button Disabled="true">
        <Spinner Size="Spinner.SpinnerSize.Sm" Class="mr-2" />
        Please wait
    </Button>
</PatternCard>

<PatternCard Label="Button Group" Code="@_codeButtonGroup">
    <Flex Class="divide-x divide-border overflow-hidden rounded-md border border-border">
        <Button Variant="Button.ButtonVariant.Ghost" Class="rounded-none h-9 px-3 text-sm">Left</Button>
        <Button Variant="Button.ButtonVariant.Ghost" Class="rounded-none h-9 px-3 text-sm">Center</Button>
        <Button Variant="Button.ButtonVariant.Ghost" Class="rounded-none h-9 px-3 text-sm">Right</Button>
    </Flex>
</PatternCard>
</Stack>

@code {
    private string _codeButtonDefault = @"<Button>Button</Button>";
    private string _codeButtonSecondary = @"<Button Variant=""Button.ButtonVariant.Secondary"">Secondary</Button>";

    private string _codeButtonDestructive = @"<Button Variant=""Button.ButtonVariant.Destructive"">Destructive</Button>";
    private string _codeButtonOutline = @"<Button Variant=""Button.ButtonVariant.Outline"">Outline</Button>";

    private string _codeButtonGhost = @"<Button Variant=""Button.ButtonVariant.Ghost"">Ghost</Button>";
    private string _codeButtonLink = @"<Button Variant=""Button.ButtonVariant.Link"">Link</Button>";

        private string _codeButtonIcon = @"<Button Variant=""Button.ButtonVariant.Outline"" Class=""h-9 w-9 p-0"">
        <Blazicon Svg=""Lucide.Plus"" class=""h-4 w-4"" />
    </Button>";

        private string _codeButtonLoading = @"<Button Disabled=""true"">
        <Spinner Size=""Spinner.SpinnerSize.Sm"" Class=""mr-2"" />
        Please wait
    </Button>";

        private string _codeButtonGroup = @"<Flex Class=""divide-x divide-border overflow-hidden rounded-md border border-border"">
        <Button Variant=""Button.ButtonVariant.Ghost"" Class=""rounded-none h-9 px-3 text-sm"">Left</Button>
        <Button Variant=""Button.ButtonVariant.Ghost"" Class=""rounded-none h-9 px-3 text-sm"">Center</Button>
        <Button Variant=""Button.ButtonVariant.Ghost"" Class=""rounded-none h-9 px-3 text-sm"">Right</Button>
    </Flex>";
}
