@page "/components/empty-state"

<PageTitle>Empty State — Lumeo</PageTitle>

<PageHeader Title="Empty State" Description="A placeholder component for when there is no data to display." />

<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>No data messages when a list, table, or feed has zero items</li>
        <li>Empty lists or collections before the user adds their first item</li>
        <li>Search results pages that return no matches</li>
        <li>First-time user experiences prompting an initial action</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Stack Class="rounded-lg border border-border/40 bg-card">
            <EmptyState Title="No results found" Description="Try adjusting your search or filters to find what you're looking for." />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Icon and Action" Code="@_actionCode">
        <Stack Class="rounded-lg border border-border/40 bg-card">
            <EmptyState Title="No projects yet" Description="Get started by creating your first project.">
                <IconContent>
                    <DynamicIcon Name="Plus" Class="h-10 w-10" />
                </IconContent>
                <Action>
                    <Button>Create Project</Button>
                </Action>
            </EmptyState>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Inbox Empty" Code="@_inboxCode">
        <Stack Class="rounded-lg border border-border/40 bg-card">
            <EmptyState Title="Inbox zero" Description="You have no new messages. Enjoy the silence.">
                <IconContent>
                    <DynamicIcon Name="Mail" Class="h-10 w-10" />
                </IconContent>
            </EmptyState>
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="emptystate" Level="3" Class="mt-8 scroll-mt-20">EmptyState</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">IconContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Custom icon displayed above the title. (<c>Icon</c> is a deprecated alias.)</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Title</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Main heading text for the empty state.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Description</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Secondary description text below the title.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Action</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Action buttons area below the description.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<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/card" class="text-primary hover:underline">Card</a> — Container for content that can hold empty states</li>
        <li><a href="/components/alert" class="text-primary hover:underline">Alert</a> — Inline messages for warnings or informational notices</li>
        <li><a href="/components/skeleton" class="text-primary hover:underline">Skeleton</a> — Placeholder while content is loading, before an empty state is shown</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<EmptyState
    Title=""No results found""
    Description=""Try adjusting your search or filters."" />";

    private string _actionCode = @"<EmptyState Title=""No projects yet"" Description=""Get started by creating your first project."">
    <IconContent>
        <DynamicIcon Name=""Plus"" Class=""h-10 w-10"" />
    </IconContent>
    <Action>
        <Button>Create Project</Button>
    </Action>
</EmptyState>";

    private string _inboxCode = @"<EmptyState Title=""Inbox zero"" Description=""You have no new messages."">
    <IconContent>
        <DynamicIcon Name=""Mail"" Class=""h-10 w-10"" />
    </IconContent>
</EmptyState>";
}
