@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Simple Card" Code="@_codeCardSimple">
    <Card Class="w-full max-w-sm">
        <CardHeader>
            <Lumeo.Text Size="base" Weight="semibold" Color="foreground">Card Title</Lumeo.Text>
            <Lumeo.Text Size="sm" Color="muted">Card description goes here.</Lumeo.Text>
        </CardHeader>
        <CardContent>
            <Lumeo.Text Size="sm" Color="muted">Your content lives here.</Lumeo.Text>
        </CardContent>
    </Card>
</PatternCard>

<PatternCard Label="With Form" Code="@_codeCardForm">
    <Card Class="w-full max-w-sm">
        <CardHeader>
            <Lumeo.Text Size="base" Weight="semibold" Color="foreground">Create Account</Lumeo.Text>
            <Lumeo.Text Size="sm" Color="muted">Fill in your details to get started.</Lumeo.Text>
        </CardHeader>
        <CardContent>
            <Stack Gap="3">
                <Stack Gap="1.5">
                    <Label>Name</Label>
                    <Input placeholder="Your name" />
                </Stack>
                <Stack Gap="1.5">
                    <Label>Email</Label>
                    <Input placeholder="you@example.com" />
                </Stack>
            </Stack>
        </CardContent>
        <CardFooter Class="gap-2">
            <Button Variant="Button.ButtonVariant.Outline" Class="flex-1">Cancel</Button>
            <Button Class="flex-1">Create</Button>
        </CardFooter>
    </Card>
</PatternCard>
<PatternCard Label="Stats Card" Code="@_codeCardStats">
    <Card Class="w-full max-w-xs">
        <CardHeader>
            <Lumeo.Text Size="sm" Weight="medium" Color="muted">Total Revenue</Lumeo.Text>
        </CardHeader>
        <CardContent>
            <Lumeo.Text Size="3xl" Weight="bold" Color="foreground">$45,231</Lumeo.Text>
            <Lumeo.Text Size="xs" Color="muted" Class="mt-1">+20.1% from last month</Lumeo.Text>
        </CardContent>
    </Card>
</PatternCard>
</Stack>

@code {
        private string _codeCardSimple = @"<Card>
        <CardHeader>
            <p class=""text-base font-semibold text-foreground"">Card Title</p>
            <p class=""text-sm text-muted-foreground"">Card description goes here.</p>
        </CardHeader>
        <CardContent>
            <p class=""text-sm text-muted-foreground"">Your content lives here.</p>
        </CardContent>
    </Card>";

        private string _codeCardForm = @"<Card>
        <CardHeader>
            <p class=""text-base font-semibold text-foreground"">Create Account</p>
            <p class=""text-sm text-muted-foreground"">Fill in your details to get started.</p>
        </CardHeader>
        <CardContent>
            <div class=""space-y-3"">
                <div class=""space-y-1.5"">
                    <Label>Name</Label>
                    <Input placeholder=""Your name"" />
                </div>
                <div class=""space-y-1.5"">
                    <Label>Email</Label>
                    <Input placeholder=""you@example.com"" />
                </div>
            </div>
        </CardContent>
        <CardFooter Class=""gap-2"">
            <Button Variant=""Button.ButtonVariant.Outline"" Class=""flex-1"">Cancel</Button>
            <Button Class=""flex-1"">Create</Button>
        </CardFooter>
    </Card>";

        private string _codeCardStats = @"<Card>
        <CardHeader>
            <p class=""text-sm font-medium text-muted-foreground"">Total Revenue</p>
        </CardHeader>
        <CardContent>
            <p class=""text-3xl font-bold text-foreground"">$45,231</p>
            <p class=""text-xs text-muted-foreground mt-1"">+20.1% from last month</p>
        </CardContent>
    </Card>";
}
