@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeTextareaDefault">
    <Textarea placeholder="Type your message here..." Class="w-full max-w-sm" />
</PatternCard>

<PatternCard Label="With Character Count" Code="@_codeTextareaCharCount">
    <Stack Gap="1.5" Class="w-full max-w-sm">
        <Textarea placeholder="Max 200 characters..."
                  Class="w-full resize-none"
                  @oninput='e => _textareaValue = e.Value?.ToString() ?? ""' />
        <Flex Justify="end">
            <Lumeo.Text As="span" Size="xs" Color="muted">@_textareaValue.Length / 200</Lumeo.Text>
        </Flex>
    </Stack>
</PatternCard>
</Stack>

@code {
    private string _textareaValue = "";

        private string _codeTextareaDefault = @"<Textarea placeholder=""Type your message here..."" />";
        private string _codeTextareaCharCount = @"<Stack Gap=""1.5"">
        <Textarea placeholder=""Max 200 characters..."" Class=""resize-none""
                  @oninput='e => _value = e.Value?.ToString() ?? """"' />
        <Flex Justify=""end"">
            <Lumeo.Text As=""span"" Size=""xs"" Color=""muted"">@_value.Length / 200</Lumeo.Text>
        </Flex>
    </Stack>";
}
