Profile Edit Form

<BbCard class="w-full max-w-lg">
    <BbCardHeader>
        <BbCardTitle class="text-2xl">Edit Profile</BbCardTitle>
        <BbCardDescription>Update your personal information.</BbCardDescription>
    </BbCardHeader>
    <BbCardContent>
        <div class="space-y-4">
            <div class="flex items-center gap-4">
                <BbAvatar Size="AvatarSize.ExtraLarge">
                    <BbAvatarFallback>JD</BbAvatarFallback>
                </BbAvatar>
                <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small">Change Photo</BbButton>
            </div>
            <BbSeparator />
            <div class="space-y-2">
                <BbLabel For="display-name">Display Name</BbLabel>
                <BbInput Id="display-name" Type="InputType.Text" Value="John Doe" />
            </div>
            <div class="space-y-2">
                <BbLabel For="email">Email</BbLabel>
                <BbInput Id="email" Type="InputType.Email" Value="[email protected]" />
                <p class="text-xs text-muted-foreground">This is your primary email.</p>
            </div>
            <div class="space-y-2">
                <BbLabel For="bio">Bio</BbLabel>
                <BbTextarea Id="bio" Rows="3" Placeholder="Tell us about yourself..." />
            </div>
            <div class="space-y-2">
                <BbLabel>Timezone</BbLabel>
                <BbSelect @bind-Value="selectedTimezone" DisplayTextSelector="@GetTimezoneDisplayText">
                    <BbSelectTrigger>
                        <BbSelectValue Placeholder="Select timezone" />
                    </BbSelectTrigger>
                    <BbSelectContent>
                        <BbSelectItem TValue="string" Value="@("utc")" Text="UTC">UTC</BbSelectItem>
                        <BbSelectItem TValue="string" Value="@("est")" Text="EST">EST</BbSelectItem>
                        <BbSelectItem TValue="string" Value="@("cst")" Text="CST">CST</BbSelectItem>
                        <BbSelectItem TValue="string" Value="@("pst")" Text="PST">PST</BbSelectItem>
                        <BbSelectItem TValue="string" Value="@("gmt")" Text="GMT">GMT</BbSelectItem>
                        <BbSelectItem TValue="string" Value="@("cet")" Text="CET">CET</BbSelectItem>
                    </BbSelectContent>
                </BbSelect>
            </div>
        </div>
    </BbCardContent>
    <BbCardFooter>
        <div class="flex w-full justify-end gap-2">
            <BbButton Variant="ButtonVariant.Outline">Cancel</BbButton>
            <BbButton>Save Changes</BbButton>
        </div>
    </BbCardFooter>
</BbCard>

@code {
    private string selectedTimezone = "utc";

    private string GetTimezoneDisplayText(string value) => value switch
    {
        "utc" => "UTC",
        "est" => "EST",
        "cst" => "CST",
        "pst" => "PST",
        "gmt" => "GMT",
        "cet" => "CET",
        _ => value
    };
}