cozsweet-frontend-nextjs/src/app/subscription/components/subscription-vip-offer-section.tsx

"use client";

import styles from "./subscription-vip-offer-section.module.css";

export interface VipOfferPlanView {
  id: string;
  title: string;
  price: string;
  currency: string;
  originalPrice: string;
  mostPopular?: boolean;
  promotionType?: string | null;
}

export interface SubscriptionVipOfferSectionProps {
  plans: readonly VipOfferPlanView[];
  selectedPlanId: string | null;
  onSelectPlan: (planId: string) => void;
}

export function SubscriptionVipOfferSection({
  plans,
  selectedPlanId,
  onSelectPlan,
}: SubscriptionVipOfferSectionProps) {
  return (
    <section className={styles.section} aria-label="Choose a VIP plan">
      <div className={styles.summary}>
        <h1 className={styles.title}>
          <span className={styles.titleText}>VIP Membership</span>
          <span className={styles.renewText}>
            Auto-renews, cancel anytime
          </span>
        </h1>
        <p className={styles.subtitle}>
          Get 3,000 credits monthly and enjoy unlimited daily chats
        </p>
        <span className={styles.notch} aria-hidden="true" />
      </div>

      <div className={styles.planGrid}>
        {plans.map((plan) => {
          const selected = selectedPlanId === plan.id;
          const badgeCount = Number(plan.mostPopular === true);
          return (
            <button
              key={plan.id}
              type="button"
              data-analytics-key="subscription.plan_select"
              data-analytics-label="Select VIP plan"
              className={`${styles.planCard} ${selected ? styles.selected : ""} ${badgeCount > 0 ? styles.planCardWithBadges : ""} ${badgeCount > 1 ? styles.planCardWithTwoBadges : ""}`}
              aria-pressed={selected}
              aria-label={`${plan.title}, ${plan.price} ${plan.currency}`}
              onClick={() => onSelectPlan(plan.id)}
            >
              {badgeCount > 0 ? (
                <span className={styles.badgeStack}>
                  {plan.mostPopular ? (
                    <span className={styles.popularBadge}>Most Popular</span>
                  ) : null}
                </span>
              ) : null}
              <span className={styles.planTitle}>{plan.title}</span>
              <span className={styles.priceLine}>
                <span className={styles.price}>{plan.price}</span>
                <span className={styles.currency}>{plan.currency}</span>
              </span>
              <span className={styles.originalPrice}>
                {plan.originalPrice || "\u00a0"}
              </span>
            </button>
          );
        })}
      </div>
    </section>
  );
}