@page "/components/card"

<PageTitle>Card — Lumeo</PageTitle>

<PageHeader Title="Card" Description="Displays a card with header, content, and footer." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Group related content such as text, images, and actions into a single container</li>
        <li>Display product or feature cards in a grid layout</li>
        <li>Build dashboard widgets with headers, stats, and action buttons</li>
        <li>Present form sections with a clear visual boundary</li>
        <li>Show preview cards for blog posts, articles, or media</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Card>
                <CardHeader>
                    <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Notifications</Heading>
                    <Lumeo.Text Size="sm" Color="muted">You have 3 unread messages.</Lumeo.Text>
                </CardHeader>
                <CardContent>
                    <Lumeo.Text Size="sm">Your recent notifications will appear here. Stay up to date with the latest updates.</Lumeo.Text>
                </CardContent>
                <CardFooter>
                    <Button Class="w-full">Mark all as read</Button>
                </CardFooter>
            </Card>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Card with Actions" Code="@_actionsCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Card>
                <CardHeader>
                    <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Blog Post</Heading>
                    <Lumeo.Text Size="sm" Color="muted">Published on Jan 12, 2025</Lumeo.Text>
                </CardHeader>
                <CardContent>
                    <Lumeo.Text Size="sm" Color="foreground">Learn how to build accessible, composable UI components using Blazor and Tailwind CSS in this in-depth guide.</Lumeo.Text>
                </CardContent>
                <CardFooter>
                    <Flex Gap="2" Class="w-full">
                        <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">
                            <DynamicIcon Name="Copy" Class="h-4 w-4" /> Edit
                        </Button>
                        <Button Variant="Button.ButtonVariant.Destructive" Size="Button.ButtonSize.Sm">
                            <DynamicIcon Name="Trash" Class="h-4 w-4" /> Delete
                        </Button>
                    </Flex>
                </CardFooter>
            </Card>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Horizontal Card" Code="@_horizontalCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Card>
                <Flex>
                    <Center Class="w-32 rounded-l-lg bg-muted shrink-0">
                        <DynamicIcon Name="Star" Class="h-10 w-10 text-muted-foreground" />
                    </Center>
                    <Stack Gap="0" Class="flex-1">
                        <CardHeader>
                            <Heading Level="3" Size="base" Weight="semibold" Class="leading-none tracking-tight">Featured Article</Heading>
                            <Lumeo.Text Size="sm" Color="muted">5 min read</Lumeo.Text>
                        </CardHeader>
                        <CardContent>
                            <Lumeo.Text Size="sm" Color="muted">An introduction to modern component-driven design systems.</Lumeo.Text>
                        </CardContent>
                        <CardFooter>
                            <Button Variant="Button.ButtonVariant.Link" Class="px-0">Read more</Button>
                        </CardFooter>
                    </Stack>
                </Flex>
            </Card>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Form" Code="@_formCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Card>
                <CardHeader>
                    <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Create project</Heading>
                    <Lumeo.Text Size="sm" Color="muted">Deploy your new project in one click.</Lumeo.Text>
                </CardHeader>
                <CardContent>
                    <Stack Gap="4">
                        <FormField Label="Name">
                            <Input placeholder="Name of your project" />
                        </FormField>
                        <FormField Label="Description">
                            <Input placeholder="Describe your project" />
                        </FormField>
                    </Stack>
                </CardContent>
                <CardFooter>
                    <Flex Justify="between" Class="w-full">
                        <Button Variant="Button.ButtonVariant.Outline">Cancel</Button>
                        <Button>Deploy</Button>
                    </Flex>
                </CardFooter>
            </Card>
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Move focus to the next interactive element inside the card</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
    <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Card is a container component with no built-in keyboard interactions. Focus management depends on the interactive elements placed inside.</Lumeo.Text>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Card</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">No additional parameters beyond Class and AdditionalAttributes. Use sub-components to structure content.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnClick</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;MouseEventArgs&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Invoked when the card is clicked (makes the card interactive).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonPressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Press feedback when OnClick is set. Values: None, Scale, Brightness, Ripple.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">CardHeader</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">Container for the card title and description. Renders as a flex column with spacing.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">CardContent</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">Main content area of the card with horizontal padding.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">CardFooter</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">Footer area of the card rendered as a flex row, useful for action buttons.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/accordion" class="text-primary hover:underline">Accordion</a> — Use when content sections need to be collapsible rather than always visible</li>
        <li><a href="/components/dialog" class="text-primary hover:underline">Dialog</a> — Use when card-like content needs to appear as a modal overlay</li>
        <li><a href="/components/collapsible" class="text-primary hover:underline">Collapsible</a> — Use when a card section should expand or collapse on demand</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<Card>
    <CardHeader>
        <Heading Level=""3"" Size=""lg"" Class=""leading-none tracking-tight"">Notifications</Heading>
        <Lumeo.Text Size=""sm"" Color=""muted"">You have 3 unread messages.</Lumeo.Text>
    </CardHeader>
    <CardContent>
        <Lumeo.Text Size=""sm"">Your recent notifications will appear here.</Lumeo.Text>
    </CardContent>
    <CardFooter>
        <Button Class=""w-full"">Mark all as read</Button>
    </CardFooter>
</Card>";

    private string _formCode = @"<Card>
    <CardHeader>
        <Heading Level=""3"" Size=""lg"" Class=""leading-none tracking-tight"">Create project</Heading>
        <Lumeo.Text Size=""sm"" Color=""muted"">Deploy your new project in one click.</Lumeo.Text>
    </CardHeader>
    <CardContent>
        <Stack Gap=""4"">
            <FormField Label=""Name"">
                <Input placeholder=""Name of your project"" />
            </FormField>
            <FormField Label=""Description"">
                <Input placeholder=""Describe your project"" />
            </FormField>
        </Stack>
    </CardContent>
    <CardFooter>
        <Flex Justify=""between"" Class=""w-full"">
            <Button Variant=""Button.ButtonVariant.Outline"">Cancel</Button>
            <Button>Deploy</Button>
        </Flex>
    </CardFooter>
</Card>";

    private string _actionsCode = @"<Card>
    <CardHeader>
        <Heading Level=""3"" Size=""lg"" Class=""leading-none tracking-tight"">Blog Post</Heading>
        <Lumeo.Text Size=""sm"" Color=""muted"">Published on Jan 12, 2025</Lumeo.Text>
    </CardHeader>
    <CardContent>
        <Lumeo.Text Size=""sm"" Color=""foreground"">
            Learn how to build accessible, composable UI components using
            Blazor and Tailwind CSS in this in-depth guide.
        </Lumeo.Text>
    </CardContent>
    <CardFooter>
        <Flex Gap=""2"" Class=""w-full"">
            <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Sm"">
                <Blazicon Svg=""Lucide.Copy"" class=""h-4 w-4"" /> Edit
            </Button>
            <Button Variant=""Button.ButtonVariant.Destructive"" Size=""Button.ButtonSize.Sm"">
                <Blazicon Svg=""Lucide.Trash"" class=""h-4 w-4"" /> Delete
            </Button>
        </Flex>
    </CardFooter>
</Card>";

    private string _horizontalCode = @"<Card>
    <Flex>
        <Center Class=""w-32 h-32 rounded-l-lg bg-muted shrink-0"">
            <Blazicon Svg=""Lucide.Star"" class=""h-10 w-10 text-muted-foreground"" />
        </Center>
        <Stack Gap=""0"" Class=""flex-1"">
            <CardHeader>
                <Heading Level=""3"" Size=""base"" Weight=""semibold"" Class=""leading-none tracking-tight"">Featured Article</Heading>
                <Lumeo.Text Size=""sm"" Color=""muted"">5 min read</Lumeo.Text>
            </CardHeader>
            <CardContent>
                <Lumeo.Text Size=""sm"" Color=""muted"">
                    An introduction to modern component-driven design systems.
                </Lumeo.Text>
            </CardContent>
            <CardFooter>
                <Button Variant=""Button.ButtonVariant.Link"" Class=""px-0"">Read more</Button>
            </CardFooter>
        </Stack>
    </Flex>
</Card>";
}
