Shopping Cart

<div class="w-full max-w-4xl">
    <div class="grid gap-6 lg:grid-cols-[1fr_300px]">
        @* Cart Items *@
        <BbCard>
            <BbCardHeader>
                <BbCardTitle>Shopping Cart (@items.Count items)</BbCardTitle>
            </BbCardHeader>
            <BbCardContent class="space-y-0">
                @for (int i = 0; i < items.Count; i++)
                {
                    var item = items[i];
                    @if (i > 0)
                    {
                        <BbSeparator class="my-4" />
                    }
                    <div class="flex items-center gap-4">
                        <div class="w-16 h-16 bg-muted rounded flex items-center justify-center shrink-0">
                            <!-- package icon SVG -->
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium">@item.Name</p>
                            <p class="text-sm text-muted-foreground">@item.Variant</p>
                            <p class="text-sm font-medium mt-1">[email protected]("F2")</p>
                        </div>
                        <div class="flex items-center gap-1">
                            <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Icon" class="h-8 w-8">
                                <!-- minus icon SVG -->
                            </BbButton>
                            <span class="w-8 text-center text-sm font-medium">@item.Quantity</span>
                            <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Icon" class="h-8 w-8">
                                <!-- plus icon SVG -->
                            </BbButton>
                        </div>
                        <BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" class="h-8 w-8 text-muted-foreground">
                            <!-- trash-2 icon SVG -->
                        </BbButton>
                    </div>
                }
            </BbCardContent>
        </BbCard>

        @* Order Summary *@
        <BbCard class="h-fit">
            <BbCardHeader>
                <BbCardTitle>Order Summary</BbCardTitle>
            </BbCardHeader>
            <BbCardContent class="space-y-3">
                <div class="flex justify-between text-sm">
                    <span class="text-muted-foreground">Subtotal</span>
                    <span>[email protected]("F2")</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-muted-foreground">Shipping</span>
                    <span>[email protected]("F2")</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-muted-foreground">Tax</span>
                    <span>[email protected]("F2")</span>
                </div>
                <BbSeparator />
                <div class="flex justify-between font-bold">
                    <span>Total</span>
                    <span>[email protected]("F2")</span>
                </div>
            </BbCardContent>
            <BbCardFooter class="flex-col gap-2">
                <BbButton class="w-full">Proceed to Checkout</BbButton>
                <BbButton Variant="ButtonVariant.Outline" class="w-full">Continue Shopping</BbButton>
            </BbCardFooter>
        </BbCard>
    </div>
</div>

@code {
    private record CartItem(string Name, string Variant, decimal Price, int Quantity);

    private List<CartItem> items = new()
    {
        new("Wireless Headphones", "Black / Over-ear", 79.99m, 1),
        new("USB-C Hub", "Space Gray", 49.99m, 2),
        new("Laptop Stand", "Silver / Adjustable", 34.99m, 1)
    };

    private decimal Subtotal => items.Sum(i => i.Price * i.Quantity);
    private decimal Shipping => 9.99m;
    private decimal Tax => Math.Round(Subtotal * 0.08m, 2);
    private decimal Total => Subtotal + Shipping + Tax;
}