@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeRadioGroupDefault">
    <RadioGroup @bind-Value="_radio1Value" Class="space-y-2">
        <Flex Gap="2" Align="center">
            <RadioGroupItem Value="default" />
            <Label>Default</Label>
        </Flex>
        <Flex Gap="2" Align="center">
            <RadioGroupItem Value="comfortable" />
            <Label>Comfortable</Label>
        </Flex>
        <Flex Gap="2" Align="center">
            <RadioGroupItem Value="compact" />
            <Label>Compact</Label>
        </Flex>
    </RadioGroup>
</PatternCard>
<PatternCard Label="Card Style" Code="@_codeRadioGroupCard">
    <RadioGroup @bind-Value="_radio2Value">
        <Grid Columns="3" Gap="2">
            @foreach (var plan in new[] { "Starter", "Pro", "Enterprise" })
            {
                var p = plan;
                <label class="@($"flex items-center justify-center rounded-md border p-3 cursor-pointer text-sm font-medium transition-colors {(_radio2Value == p ? "border-primary bg-primary/10 text-foreground" : "border-border text-muted-foreground hover:bg-accent")}")">
                    <RadioGroupItem Value="@p" Class="sr-only" />
                    @p
                </label>
            }
        </Grid>
    </RadioGroup>
</PatternCard>
</Stack>

@code {
    private string _radio1Value = "option-1";

    private string _radio2Value = "comfortable";

        private string _codeRadioGroupDefault = @"<RadioGroup @bind-Value=""_value"" Class=""space-y-2"">
        <div class=""flex items-center gap-2"">
            <RadioGroupItem Value=""default"" />
            <Label>Default</Label>
        </div>
        <div class=""flex items-center gap-2"">
            <RadioGroupItem Value=""comfortable"" />
            <Label>Comfortable</Label>
        </div>
        <div class=""flex items-center gap-2"">
            <RadioGroupItem Value=""compact"" />
            <Label>Compact</Label>
        </div>
    </RadioGroup>";

        private string _codeRadioGroupCard = @"<RadioGroup @bind-Value=""_value"" Class=""grid grid-cols-3 gap-2"">
        <label class=""flex items-center justify-center rounded-md border p-3 cursor-pointer"">
            <RadioGroupItem Value=""Starter"" Class=""sr-only"" />
            Starter
        </label>
        <label class=""flex items-center justify-center rounded-md border p-3 cursor-pointer"">
            <RadioGroupItem Value=""Pro"" Class=""sr-only"" />
            Pro
        </label>
        <label class=""flex items-center justify-center rounded-md border p-3 cursor-pointer"">
            <RadioGroupItem Value=""Enterprise"" Class=""sr-only"" />
            Enterprise
        </label>
    </RadioGroup>";
}
