@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Command" Code="@_codeCommandBasic">
    <Lumeo.Command Class="w-full max-w-sm rounded-lg border border-border">
        <CommandInput Placeholder="Type a command or search..." />
        <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup Heading="Suggestions">
                <CommandItem>Calendar</CommandItem>
                <CommandItem>Search Emoji</CommandItem>
                <CommandItem>Calculator</CommandItem>
            </CommandGroup>
        </CommandList>
    </Lumeo.Command>
</PatternCard>

<PatternCard Label="With Groups" Code="@_codeCommandGroups">
    <Lumeo.Command Class="w-full max-w-sm rounded-lg border border-border">
        <CommandInput Placeholder="Search..." />
        <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup Heading="Suggestions">
                <CommandItem>Calendar</CommandItem>
                <CommandItem>Search Emoji</CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup Heading="Settings">
                <CommandItem>Profile</CommandItem>
                <CommandItem>Billing</CommandItem>
                <CommandItem>Preferences</CommandItem>
            </CommandGroup>
        </CommandList>
    </Lumeo.Command>
</PatternCard>
</Stack>

@code {
        private string _codeCommandBasic = @"<Command Class=""rounded-lg border"">
        <CommandInput Placeholder=""Type a command or search..."" />
        <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup Heading=""Suggestions"">
                <CommandItem>Calendar</CommandItem>
                <CommandItem>Search Emoji</CommandItem>
                <CommandItem>Calculator</CommandItem>
            </CommandGroup>
        </CommandList>
    </Command>";

        private string _codeCommandGroups = @"<Command Class=""rounded-lg border"">
        <CommandInput Placeholder=""Search..."" />
        <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup Heading=""Suggestions"">
                <CommandItem>Calendar</CommandItem>
                <CommandItem>Search Emoji</CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup Heading=""Settings"">
                <CommandItem>Profile</CommandItem>
                <CommandItem>Billing</CommandItem>
            </CommandGroup>
        </CommandList>
    </Command>";
}
