refactor(billing-status-badge): update badges to use buttons with icons

Change VipBadge element from div to button for better semantics and 
interaction. Add buttonSize getter to map size args to PrimaryButton 
sizes. Replace VIP and Member badges' container div/span with flex 
containers that include shield-check icons and consistent spacing. This 
improves accessibility, styling,
and consistency across badges by using PrimaryButton and 
PrimaryLinkButton components.

Author: rohitpaulk

app/components/billing-status-badge/indirect-member-badge.hbs

@@ -1,8 +1,8 @@
 <a href="https://docs.codecrafters.io/membership/content" target="_blank" rel="noopener noreferrer" data-test-indirect-member-badge ...attributes>
   <PrimaryButton @size={{this.linkButtonSize}}>
-    <span class="flex items-center">
-      Member
-      {{svg-jar "shield-check" class="w-4 ml-1 fill-current"}}
+    <span class="flex items-center gap-1 flex-nowrap">
+      <span>Member</span>
+      {{svg-jar "shield-check" class="w-4 fill-current"}}
     </span>
 
     <EmberTooltip @text="You have access to all CodeCrafters membership benefits. Click here to learn more." />

app/components/billing-status-badge/member-badge.hbs

@@ -1,9 +1,8 @@
 <PrimaryLinkButton @size={{this.linkButtonSize}} @route="settings.billing" data-test-member-badge ...attributes>
-
-  <span class="flex items-center">
-    Member
-    {{svg-jar "shield-check" class="w-4 ml-1 fill-current"}}
-  </span>
+  <div class="flex items-center gap-1 flex-nowrap">
+    <span>Member</span>
+    {{svg-jar "shield-check" class="w-4 fill-current"}}
+  </div>
 
   <EmberTooltip @text="You're a CodeCrafters member. Click here to view your membership details." />
 </PrimaryLinkButton>

app/components/billing-status-badge/vip-badge.hbs

@@ -1,13 +1,8 @@
-<div
-  class="text-white font-semibold bg-teal-500 rounded-sm flex items-center justify-center
-    {{if (eq this.size 'small') 'text-xs px-2 py-1'}}
-    {{if (eq this.size 'large') 'text-sm px-3 py-1.5'}}"
-  data-test-vip-badge
-  ...attributes
->
-  VIP
-
-  {{svg-jar "shield-check" class="w-4 ml-1 fill-current"}}
+<PrimaryButton @size={{this.buttonSize}} data-test-vip-badge ...attributes>
+  <div class="flex items-center gap-1 flex-nowrap">
+    <span>VIP</span>
+    {{svg-jar "shield-check" class="w-4 fill-current"}}
+  </div>
 
   {{#if this.currentUser.vipStatusExpiresAt}}
     <EmberTooltip
@@ -19,4 +14,4 @@
   {{else}}
     <EmberTooltip @text="You have access to all CodeCrafters content & membership features." />
   {{/if}}
-</div>
+</PrimaryButton>

app/components/billing-status-badge/vip-badge.ts

@@ -4,7 +4,7 @@ import type UserModel from 'codecrafters-frontend/models/user';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
 
 interface Signature {
-  Element: HTMLDivElement;
+  Element: HTMLButtonElement;
 
   Args: {
     size: 'small' | 'large';
@@ -14,6 +14,12 @@ interface Signature {
 export default class VipBadge extends Component<Signature> {
   @service declare authenticator: AuthenticatorService;
 
+  get buttonSize() {
+    // arg:small -> PrimaryButton size:extra-small
+    // arg:large -> small
+    return this.args.size === 'large' ? 'small' : 'extra-small';
+  }
+
   get currentUser() {
     return this.authenticator.currentUser as UserModel;
   }