@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Cascader" Code="@_codeBasic">
    <Cascader Options="@_options" Placeholder="Select location..." Clearable="true" Class="max-w-sm" />
</PatternCard>
</Stack>

@code {
    private List<Cascader.CascaderOption> _options = new()
    {
        new()
        {
            Label = "North America",
            Value = "na",
            Children = new()
            {
                new()
                {
                    Label = "United States",
                    Value = "us",
                    Children = new()
                    {
                        new() { Label = "California", Value = "ca" },
                        new() { Label = "New York", Value = "ny" },
                        new() { Label = "Texas", Value = "tx" },
                    }
                },
                new()
                {
                    Label = "Canada",
                    Value = "can",
                    Children = new()
                    {
                        new() { Label = "Ontario", Value = "on" },
                        new() { Label = "Quebec", Value = "qc" },
                    }
                },
            }
        },
        new()
        {
            Label = "Europe",
            Value = "eu",
            Children = new()
            {
                new() { Label = "United Kingdom", Value = "uk" },
                new() { Label = "Germany", Value = "de" },
                new() { Label = "France", Value = "fr" },
            }
        },
    };

    private string _codeBasic = @"<Cascader Options=""@_options"" Placeholder=""Select location..."" Clearable=""true"" />";
}
