Address / Shipping

<BbCard class="w-full max-w-lg">
    <BbCardHeader>
        <BbCardTitle class="text-2xl">Shipping Address</BbCardTitle>
        <BbCardDescription>Enter your shipping details.</BbCardDescription>
    </BbCardHeader>
    <BbCardContent>
        <div class="space-y-4">
            <div class="space-y-2">
                <BbLabel For="fullname">Full Name</BbLabel>
                <BbInput Id="fullname" Type="InputType.Text" Placeholder="John Doe" />
            </div>
            <div class="space-y-2">
                <BbLabel For="address1">Address Line 1</BbLabel>
                <BbInput Id="address1" Type="InputType.Text" Placeholder="123 Main St" />
            </div>
            <div class="space-y-2">
                <BbLabel For="address2">Address Line 2</BbLabel>
                <BbInput Id="address2" Type="InputType.Text" Placeholder="Apartment, suite, etc. (optional)" />
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="space-y-2">
                    <BbLabel For="city">City</BbLabel>
                    <BbInput Id="city" Type="InputType.Text" Placeholder="San Francisco" />
                </div>
                <div class="space-y-2">
                    <BbLabel For="zip">ZIP / Postal Code</BbLabel>
                    <BbInput Id="zip" Type="InputType.Text" Placeholder="94102" />
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="space-y-2">
                    <BbLabel>State</BbLabel>
                    <BbSelect @bind-Value="selectedState">
                        <BbSelectTrigger>
                            <BbSelectValue Placeholder="Select state" />
                        </BbSelectTrigger>
                        <BbSelectContent>
                            <BbSelectItem TValue="string" Value="@("ca")" Text="California">California</BbSelectItem>
                            <BbSelectItem TValue="string" Value="@("ny")" Text="New York">New York</BbSelectItem>
                            <BbSelectItem TValue="string" Value="@("tx")" Text="Texas">Texas</BbSelectItem>
                            <BbSelectItem TValue="string" Value="@("fl")" Text="Florida">Florida</BbSelectItem>
                            <BbSelectItem TValue="string" Value="@("il")" Text="Illinois">Illinois</BbSelectItem>
                        </BbSelectContent>
                    </BbSelect>
                </div>
                <div class="space-y-2">
                    <BbLabel>Country</BbLabel>
                    <BbSelect @bind-Value="selectedCountry">
                        <BbSelectTrigger>
                            <BbSelectValue Placeholder="Select country" />
                        </BbSelectTrigger>
                        <BbSelectContent>
                            <BbSelectItem TValue="string" Value="@("us")" Text="United States">United States</BbSelectItem>
                            <BbSelectItem TValue="string" Value="@("ca-country")" Text="Canada">Canada</BbSelectItem>
                            <BbSelectItem TValue="string" Value="@("uk")" Text="United Kingdom">United Kingdom</BbSelectItem>
                            <BbSelectItem TValue="string" Value="@("au")" Text="Australia">Australia</BbSelectItem>
                        </BbSelectContent>
                    </BbSelect>
                </div>
            </div>
            <div class="space-y-2">
                <BbLabel For="phone">Phone Number</BbLabel>
                <BbInput Id="phone" Type="InputType.Tel" Placeholder="+1 (555) 000-0000" />
            </div>
        </div>
    </BbCardContent>
    <BbCardFooter class="flex justify-between">
        <BbButton Variant="ButtonVariant.Outline">Cancel</BbButton>
        <BbButton>Save Address</BbButton>
    </BbCardFooter>
</BbCard>

@code {
    private string? selectedState;
    private string? selectedCountry;
}