@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codePopoverDefault">
    <Popover @bind-Open="_popover1Open">
        <PopoverTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Popover</Button>
        </PopoverTrigger>
        <PopoverContent Class="w-64 p-4">
            <Lumeo.Text Size="sm" Weight="medium" Color="foreground">Popover Content</Lumeo.Text>
            <Lumeo.Text Size="xs" Color="muted" Class="mt-1">This is the popover content area.</Lumeo.Text>
        </PopoverContent>
    </Popover>
</PatternCard>

<PatternCard Label="With Form" Code="@_codePopoverForm">
    <Popover @bind-Open="_popover2Open">
        <PopoverTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Settings</Button>
        </PopoverTrigger>
        <PopoverContent Class="w-72 p-4">
            <Lumeo.Text Size="sm" Weight="semibold" Color="foreground" Class="mb-3">Dimensions</Lumeo.Text>
            <Stack Gap="2">
                <Flex Gap="3" Align="center">
                    <Label Class="w-16 text-xs">Width</Label>
                    <Input placeholder="100%" Class="flex-1 h-7 text-xs" />
                </Flex>
                <Flex Gap="3" Align="center">
                    <Label Class="w-16 text-xs">Height</Label>
                    <Input placeholder="auto" Class="flex-1 h-7 text-xs" />
                </Flex>
            </Stack>
        </PopoverContent>
    </Popover>
</PatternCard>
</Stack>

@code {
    private bool _popover1Open;

    private bool _popover2Open;

        private string _codePopoverDefault = @"<Popover @bind-Open=""_open"">
        <PopoverTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Popover</Button>
        </PopoverTrigger>
        <PopoverContent Class=""w-64 p-4"">
            <p class=""text-sm font-medium text-foreground"">Popover Content</p>
            <p class=""text-xs text-muted-foreground mt-1"">This is the popover content area.</p>
        </PopoverContent>
    </Popover>";

        private string _codePopoverForm = @"<Popover @bind-Open=""_open"">
        <PopoverTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Settings</Button>
        </PopoverTrigger>
        <PopoverContent Class=""w-72 p-4"">
            <p class=""text-sm font-semibold text-foreground mb-3"">Dimensions</p>
            <div class=""space-y-2"">
                <div class=""flex items-center gap-3"">
                    <Label Class=""w-16 text-xs"">Width</Label>
                    <Input placeholder=""100%"" Class=""flex-1 h-7 text-xs"" />
                </div>
            </div>
        </PopoverContent>
    </Popover>";
}
