@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeProgressDefault">
    <Stack Gap="2" Class="w-full max-w-sm">
        <Flex Justify="between" Class="text-xs text-muted-foreground">
            <Lumeo.Text As="span">Progress</Lumeo.Text>
            <Lumeo.Text As="span">60%</Lumeo.Text>
        </Flex>
        <Progress Value="60" />
    </Stack>
</PatternCard>
<PatternCard Label="All Variants" Code="@_codeProgressVariants">
    <Stack Gap="3" Class="w-full max-w-sm">
        <Stack Gap="1">
            <Lumeo.Text Size="xs" Color="muted">Default — 40%</Lumeo.Text>
            <Progress Value="40" />
        </Stack>
        <Stack Gap="1">
            <Lumeo.Text Size="xs" Color="muted">Success — 75%</Lumeo.Text>
            <Progress Value="75" Variant="Progress.ProgressVariant.Success" />
        </Stack>
        <Stack Gap="1">
            <Lumeo.Text Size="xs" Color="muted">Warning — 55%</Lumeo.Text>
            <Progress Value="55" Variant="Progress.ProgressVariant.Warning" />
        </Stack>
        <Stack Gap="1">
            <Lumeo.Text Size="xs" Color="muted">Destructive — 90%</Lumeo.Text>
            <Progress Value="90" Variant="Progress.ProgressVariant.Destructive" />
        </Stack>
    </Stack>
</PatternCard>
</Stack>

@code {
        private string _codeProgressDefault = @"<Progress Value=""60"" />";

        private string _codeProgressVariants = @"<Stack Gap=""3"">
        <Progress Value=""40"" />
        <Progress Value=""75"" Variant=""Progress.ProgressVariant.Success"" />
        <Progress Value=""55"" Variant=""Progress.ProgressVariant.Warning"" />
        <Progress Value=""90"" Variant=""Progress.ProgressVariant.Destructive"" />
    </Stack>";
}
