component PricingPlanCard {
  props {
    class = ""
    name = "Starter"
    description = ""
    price = "₹0"
    period = "/month"
    featured = false
    badgeLabel = "Most popular"
    ctaLabel = "Choose plan"
    ctaHref = "#"
  }

  view {
    <article class="relative flex h-full min-w-0 flex-col rounded-3xl border bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm)] transition duration-200 sm:p-7 {class}">
      {#if featured}
        <div class="mb-5">
          <Badge label="{badgeLabel}" variant="brand" />
        </div>
      {/if}

      <h3 class="text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
        {name}
      </h3>

      {#if description}
        <p class="mt-2 min-h-14 text-sm leading-6 text-[var(--wire-color-text-muted)]">
          {description}
        </p>
      {/if}

      <div class="mt-6 flex flex-wrap items-end gap-x-1.5 gap-y-1">
        <span class="text-4xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text)]">
          {price}
        </span>
        {#if period}
          <span class="pb-1 text-sm text-[var(--wire-color-text-muted)]">
            {period}
          </span>
        {/if}
      </div>

      <div class="mt-6 flex-1 border-t border-[var(--wire-color-border)] pt-6">
        <slot />
      </div>

      {#if featured}
        <a
          href="{ctaHref}"
          class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast)] no-underline shadow-[var(--wire-shadow-sm)] transition duration-200 hover:bg-[var(--wire-color-primary-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
        >
          {ctaLabel}
        </a>
      {:else}
        <a
          href="{ctaHref}"
          class="mt-7 inline-flex min-h-11 w-full items-center justify-center rounded-xl border border-[var(--wire-color-border-strong)] bg-[var(--wire-color-surface)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text)] no-underline transition duration-200 hover:border-[var(--wire-color-primary)] hover:bg-[var(--wire-color-surface-2)] hover:text-[var(--wire-color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
        >
          {ctaLabel}
        </a>
      {/if}
    </article>
  }
}