@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Card Skeleton" Code="@_codeSkeletonCard">
    <Flex Gap="4" Align="center" Class="w-full max-w-sm">
        <Skeleton Class="h-12 w-12 rounded-full" />
        <Stack Gap="2" Class="flex-1">
            <Skeleton Class="h-4 w-3/4" />
            <Skeleton Class="h-4 w-1/2" />
        </Stack>
    </Flex>
</PatternCard>
<PatternCard Label="Text Skeleton" Code="@_codeSkeletonText">
    <Stack Gap="2" Class="w-full max-w-sm">
        <Skeleton Class="h-4 w-full" />
        <Skeleton Class="h-4 w-5/6" />
        <Skeleton Class="h-4 w-4/6" />
    </Stack>
</PatternCard>
<PatternCard Label="Full Card Skeleton" Code="@_codeSkeletonFull">
    <Stack Gap="4" Class="w-full max-w-sm">
        <Skeleton Class="h-32 w-full rounded-lg" />
        <Stack Gap="2">
            <Skeleton Class="h-4 w-3/4" />
            <Skeleton Class="h-4 w-1/2" />
        </Stack>
        <Skeleton Class="h-9 w-full" />
    </Stack>
</PatternCard>
</Stack>

@code {
        private string _codeSkeletonCard = @"<Flex Align=""center"" Gap=""4"">
        <Skeleton Class=""h-12 w-12 rounded-full"" />
        <Stack Gap=""2"" Class=""flex-1"">
            <Skeleton Class=""h-4 w-3/4"" />
            <Skeleton Class=""h-4 w-1/2"" />
        </Stack>
    </Flex>";

        private string _codeSkeletonText = @"<Stack Gap=""2"">
        <Skeleton Class=""h-4 w-full"" />
        <Skeleton Class=""h-4 w-5/6"" />
        <Skeleton Class=""h-4 w-4/6"" />
    </Stack>";

        private string _codeSkeletonFull = @"<Stack Gap=""4"">
        <Skeleton Class=""h-32 w-full rounded-lg"" />
        <Stack Gap=""2"">
            <Skeleton Class=""h-4 w-3/4"" />
            <Skeleton Class=""h-4 w-1/2"" />
        </Stack>
        <Skeleton Class=""h-9 w-full"" />
    </Stack>";
}
