@page "/components/text"

<PageTitle>Text — Lumeo</PageTitle>

<PageHeader Title="Text" Description="A polymorphic text component with control over size, weight, color, and semantic HTML element." />

<Stack Gap="8">
    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Stack Gap="2">
            <Lumeo.Text Size="xs">Extra small text (xs)</Lumeo.Text>
            <Lumeo.Text Size="sm">Small text (sm)</Lumeo.Text>
            <Lumeo.Text>Default text (base)</Lumeo.Text>
            <Lumeo.Text Size="lg">Large text (lg)</Lumeo.Text>
            <Lumeo.Text Size="xl">Extra large text (xl)</Lumeo.Text>
            <Lumeo.Text Size="2xl">2XL text</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Colors" Code="@_colorsCode">
        <Stack Gap="2">
            <Lumeo.Text Color="foreground">Foreground</Lumeo.Text>
            <Lumeo.Text Color="muted">Muted</Lumeo.Text>
            <Lumeo.Text Color="primary">Primary</Lumeo.Text>
            <Lumeo.Text Color="destructive">Destructive</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Weights" Code="@_weightsCode">
        <Stack Gap="2">
            <Lumeo.Text Weight="light">Light weight</Lumeo.Text>
            <Lumeo.Text Weight="normal">Normal weight</Lumeo.Text>
            <Lumeo.Text Weight="medium">Medium weight</Lumeo.Text>
            <Lumeo.Text Weight="semibold">Semibold weight</Lumeo.Text>
            <Lumeo.Text Weight="bold">Bold weight</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Truncation" Code="@_truncateCode">
        <Stack Class="max-w-xs">
            <Lumeo.Text Truncate="true">This is a very long piece of text that should be truncated when it overflows the container width.</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="As Different Elements" Code="@_asCode">
        <Stack Gap="2">
            <Lumeo.Text As="p">Paragraph element (default)</Lumeo.Text>
            <Lumeo.Text As="span" Class="inline">Span element</Lumeo.Text>
            <Lumeo.Text As="small">Small element</Lumeo.Text>
            <Lumeo.Text As="strong">Strong element</Lumeo.Text>
            <Lumeo.Text As="div">Div element</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive" Code="@_sizeInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see it applied live.</Lumeo.Text>
            <Flex Wrap="true" Gap="2">
                @foreach (var s in new[] { "xs", "sm", "base", "lg", "xl", "2xl", "3xl" })
                {
                    var size = s;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_textSize == size ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _textSize = size)">@size</Button>
                }
            </Flex>
            <Lumeo.Text Size="@_textSize">The quick brown fox jumps over the lazy dog.</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Color — interactive" Code="@_colorInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a color to see it applied live.</Lumeo.Text>
            <Flex Wrap="true" Gap="2">
                @foreach (var c in new[] { "foreground", "muted", "primary", "destructive" })
                {
                    var color = c;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_textColor == color ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _textColor = color)">@color</Button>
                }
            </Flex>
            <Lumeo.Text Color="@_textColor">The quick brown fox jumps over the lazy dog.</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Weight — interactive" Code="@_weightInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a weight to see it applied live.</Lumeo.Text>
            <Flex Wrap="true" Gap="2">
                @foreach (var w in new[] { "light", "normal", "medium", "semibold", "bold" })
                {
                    var weight = w;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_textWeight == weight ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _textWeight = weight)">@weight</Button>
                }
            </Flex>
            <Lumeo.Text Weight="@_textWeight">The quick brown fox jumps over the lazy dog.</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <!-- API Reference -->
    <Stack Gap="6" Class="mt-12">
        <Heading Level="2">API Reference</Heading>
        <Stack Gap="8">
            <Stack>
                <Heading Level="3" Class="mb-3">Text</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">Size</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                                <td class="p-3 text-muted-foreground">Text size. Maps to text-{value} (e.g. "xs", "sm", "lg", "xl", "2xl").</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Weight</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                                <td class="p-3 text-muted-foreground">Font weight. Maps to font-{value} (e.g. "light", "normal", "medium", "semibold", "bold").</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Color</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                                <td class="p-3 text-muted-foreground">Text color. Supports "muted", "primary", "destructive", "foreground", or any Tailwind color token.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">As</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">"p"</td>
                                <td class="p-3 text-muted-foreground">HTML element to render. Values: "p", "span", "div", "small", "strong".</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Leading</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                                <td class="p-3 text-muted-foreground">Line height. Maps to leading-{value} (e.g. "none", "tight", "relaxed", "loose").</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Truncate</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                                <td class="p-3 text-muted-foreground">Truncates overflowing text with an ellipsis.</td>
                            </tr>
                            <tr>
                                <td class="p-3 font-mono text-xs text-primary">Align</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                                <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                                <td class="p-3 text-muted-foreground">Text alignment. Maps to text-{value} (e.g. "left", "center", "right").</td>
                            </tr>
                        </tbody>
                    </table>
                </Stack>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private string _textSize = "base";
    private string _textColor = "foreground";
    private string _textWeight = "normal";

    private string _sizeInteractiveCode = @"<Lumeo.Text Size=""lg"">The quick brown fox jumps over the lazy dog.</Lumeo.Text>";
    private string _colorInteractiveCode = @"<Lumeo.Text Color=""primary"">The quick brown fox jumps over the lazy dog.</Lumeo.Text>";
    private string _weightInteractiveCode = @"<Lumeo.Text Weight=""semibold"">The quick brown fox jumps over the lazy dog.</Lumeo.Text>";

    private string _sizesCode = @"<Text Size=""xs"">Extra small text</Text>
<Text Size=""sm"">Small text</Text>
<Text>Default text</Text>
<Text Size=""lg"">Large text</Text>
<Text Size=""xl"">Extra large text</Text>";

    private string _colorsCode = @"<Text Color=""foreground"">Foreground</Text>
<Text Color=""muted"">Muted</Text>
<Text Color=""primary"">Primary</Text>
<Text Color=""destructive"">Destructive</Text>";

    private string _weightsCode = @"<Text Weight=""light"">Light</Text>
<Text Weight=""normal"">Normal</Text>
<Text Weight=""medium"">Medium</Text>
<Text Weight=""semibold"">Semibold</Text>
<Text Weight=""bold"">Bold</Text>";

    private string _truncateCode = @"<Container MaxWidth=""xs"">
    <Text Truncate=""true"">This is a very long piece of text that will be truncated...</Text>
</Container>";

    private string _asCode = @"<Text As=""p"">Paragraph</Text>
<Text As=""span"">Span</Text>
<Text As=""small"">Small</Text>
<Text As=""strong"">Strong</Text>
<Text As=""div"">Div</Text>";
}
