@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="User Profile" Code="@_codeHoverCardProfile">
    <HoverCard>
        <HoverCardTrigger>
            <Button Variant="Button.ButtonVariant.Link">@@johndoe</Button>
        </HoverCardTrigger>
        <HoverCardContent Class="w-72">
            <Flex Gap="3">
                <Avatar>
                    <AvatarFallback>JD</AvatarFallback>
                </Avatar>
                <Stack Gap="1">
                    <Lumeo.Text Size="sm" Weight="semibold" Color="foreground">John Doe</Lumeo.Text>
                    <Lumeo.Text Size="xs" Color="muted">Software engineer building cool things.</Lumeo.Text>
                    <Flex Gap="1" Align="center" Class="pt-1">
                        <DynamicIcon Name="CalendarDays" Class="h-3 w-3 text-muted-foreground" />
                        <Lumeo.Text As="span" Size="xs" Color="muted">Joined December 2021</Lumeo.Text>
                    </Flex>
                </Stack>
            </Flex>
        </HoverCardContent>
    </HoverCard>
</PatternCard>
<PatternCard Label="Link Preview" Code="@_codeHoverCardLink">
    <HoverCard>
        <HoverCardTrigger>
            <Lumeo.Link Href="#" Class="text-sm font-medium text-primary underline underline-offset-4">Lumeo Documentation</Lumeo.Link>
        </HoverCardTrigger>
        <HoverCardContent Class="w-72">
            <Stack Gap="2">
                <Lumeo.Text Size="sm" Weight="semibold" Color="foreground">Lumeo — Blazor Component Library</Lumeo.Text>
                <Lumeo.Text Size="xs" Color="muted">A beautiful component library for Blazor, inspired by shadcn/ui. Build modern web apps with pre-built, customizable components.</Lumeo.Text>
                <Flex Gap="2" Align="center" Class="text-xs text-muted-foreground">
                    <DynamicIcon Name="Globe" Class="h-3 w-3" />
                    <Lumeo.Text As="span">lumeo.dev</Lumeo.Text>
                </Flex>
            </Stack>
        </HoverCardContent>
    </HoverCard>
</PatternCard>
</Stack>

@code {
        private string _codeHoverCardProfile = @"<HoverCard>
        <HoverCardTrigger>
            <Button Variant=""Button.ButtonVariant.Link"">@@johndoe</Button>
        </HoverCardTrigger>
        <HoverCardContent Class=""w-72"">
            <div class=""flex gap-3"">
                <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
                <div>
                    <p class=""text-sm font-semibold"">John Doe</p>
                    <p class=""text-xs text-muted-foreground"">Software engineer</p>
                </div>
            </div>
        </HoverCardContent>
    </HoverCard>";

        private string _codeHoverCardLink = @"<HoverCard>
        <HoverCardTrigger>
            <a href=""#"" class=""text-sm font-medium text-primary underline"">Lumeo Docs</a>
        </HoverCardTrigger>
        <HoverCardContent Class=""w-72"">
            <p class=""text-sm font-semibold"">Lumeo — Blazor Component Library</p>
            <p class=""text-xs text-muted-foreground"">Build modern web apps with pre-built components.</p>
        </HoverCardContent>
    </HoverCard>";
}
