@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Select" Code="@_codeSelectBasic">
    <Select @bind-Value="_select1Value" @bind-Open="_select1Open" Class="w-full max-w-xs">
        <SelectTrigger>
            <span class="@(string.IsNullOrEmpty(_select1Value) ? "text-muted-foreground" : "")">
                @(string.IsNullOrEmpty(_select1Value) ? "Select a fruit" : _select1Value)
            </span>
        </SelectTrigger>
        <SelectContent>
            <SelectItem Value="Apple">Apple</SelectItem>
            <SelectItem Value="Banana">Banana</SelectItem>
            <SelectItem Value="Cherry">Cherry</SelectItem>
            <SelectItem Value="Mango">Mango</SelectItem>
        </SelectContent>
    </Select>
</PatternCard>

<PatternCard Label="With Groups" Code="@_codeSelectGroups">
    <Select @bind-Value="_select2Value" @bind-Open="_select2Open" Class="w-full max-w-xs">
        <SelectTrigger>
            <span class="@(string.IsNullOrEmpty(_select2Value) ? "text-muted-foreground" : "")">
                @(string.IsNullOrEmpty(_select2Value) ? "Select timezone" : _select2Value)
            </span>
        </SelectTrigger>
        <SelectContent>
            <SelectGroup>
                <SelectLabel>North America</SelectLabel>
                <SelectItem Value="EST (UTC-5)">EST (UTC-5)</SelectItem>
                <SelectItem Value="CST (UTC-6)">CST (UTC-6)</SelectItem>
                <SelectItem Value="PST (UTC-8)">PST (UTC-8)</SelectItem>
            </SelectGroup>
            <SelectGroup>
                <SelectLabel>Europe</SelectLabel>
                <SelectItem Value="CET (UTC+1)">CET (UTC+1)</SelectItem>
                <SelectItem Value="GMT (UTC+0)">GMT (UTC+0)</SelectItem>
            </SelectGroup>
        </SelectContent>
    </Select>
</PatternCard>
</Stack>

@code {
    private string? _select1Value;

    private bool _select1Open;

    private string? _select2Value;

    private bool _select2Open;

        // Select
        private string _codeSelectBasic = @"<Select @bind-Value=""_value"" @bind-Open=""_open"">
        <SelectTrigger>
            <span>Select a fruit</span>
        </SelectTrigger>
        <SelectContent>
            <SelectItem Value=""Apple"">Apple</SelectItem>
            <SelectItem Value=""Banana"">Banana</SelectItem>
            <SelectItem Value=""Cherry"">Cherry</SelectItem>
        </SelectContent>
    </Select>";

        private string _codeSelectGroups = @"<Select @bind-Value=""_value"" @bind-Open=""_open"">
        <SelectTrigger>
            <span>Select timezone</span>
        </SelectTrigger>
        <SelectContent>
            <SelectGroup>
                <SelectLabel>North America</SelectLabel>
                <SelectItem Value=""EST (UTC-5)"">EST (UTC-5)</SelectItem>
                <SelectItem Value=""PST (UTC-8)"">PST (UTC-8)</SelectItem>
            </SelectGroup>
            <SelectGroup>
                <SelectLabel>Europe</SelectLabel>
                <SelectItem Value=""CET (UTC+1)"">CET (UTC+1)</SelectItem>
            </SelectGroup>
        </SelectContent>
    </Select>";
}
