@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeTooltipDefault">
    <Tooltip Text="This is a tooltip">
        <Button Variant="Button.ButtonVariant.Outline">Hover me</Button>
    </Tooltip>
</PatternCard>

<PatternCard Label="Positions" Code="@_codeTooltipPositions">
    <Flex Gap="4" Align="center" Justify="center">
        <Tooltip Text="Top tooltip" Position="Tooltip.TooltipPosition.Top">
            <Button Variant="Button.ButtonVariant.Outline" Class="text-xs px-2 h-7">Top</Button>
        </Tooltip>
        <Tooltip Text="Bottom tooltip" Position="Tooltip.TooltipPosition.Bottom">
            <Button Variant="Button.ButtonVariant.Outline" Class="text-xs px-2 h-7">Bottom</Button>
        </Tooltip>
        <Tooltip Text="Left tooltip" Position="Tooltip.TooltipPosition.Left">
            <Button Variant="Button.ButtonVariant.Outline" Class="text-xs px-2 h-7">Left</Button>
        </Tooltip>
        <Tooltip Text="Right tooltip" Position="Tooltip.TooltipPosition.Right">
            <Button Variant="Button.ButtonVariant.Outline" Class="text-xs px-2 h-7">Right</Button>
        </Tooltip>
    </Flex>
</PatternCard>
</Stack>

@code {
        private string _codeTooltipDefault = @"<Tooltip Text=""This is a tooltip"">
        <Button Variant=""Button.ButtonVariant.Outline"">Hover me</Button>
    </Tooltip>";

        private string _codeTooltipPositions = @"<Tooltip Text=""Top"" Position=""Tooltip.TooltipPosition.Top"">
        <Button>Top</Button>
    </Tooltip>
    <Tooltip Text=""Bottom"" Position=""Tooltip.TooltipPosition.Bottom"">
        <Button>Bottom</Button>
    </Tooltip>
    <Tooltip Text=""Left"" Position=""Tooltip.TooltipPosition.Left"">
        <Button>Left</Button>
    </Tooltip>
    <Tooltip Text=""Right"" Position=""Tooltip.TooltipPosition.Right"">
        <Button>Right</Button>
    </Tooltip>";
}
