"use client";

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

export interface VipOfferPlanView {
  id: string;
  title: string;
  price: string;
  currency: string;
  originalPrice: string;
}

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;
          return (
            <button
              key={plan.id}
              type="button"
              className={`${styles.planCard} ${selected ? styles.selected : ""}`}
              aria-pressed={selected}
              aria-label={`${plan.title}, ${plan.price} ${plan.currency}`}
              onClick={() => onSelectPlan(plan.id)}
            >
              <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}</span>
            </button>
          );
        })}
      </div>
    </section>
  );
}
