"use client";

import { FaCoins } from "react-icons/fa6";

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

export interface CoinsOfferPlanView {
  id: string;
  coins: number;
  price: string;
  currency: string;
  originalPrice?: string;
  isFirstRechargeOffer?: boolean;
  mostPopular?: boolean;
  firstRechargeDiscountPercent?: number | null;
  promotionType?: string | null;
}

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

export function SubscriptionCoinsOfferSection({
  plans,
  selectedPlanId,
  onSelectPlan,
}: SubscriptionCoinsOfferSectionProps) {
  return (
    <section className={styles.section} aria-label="Buy coins directly">
      <div className={styles.heading}>
        <h2 className={styles.title}>Buy Coins Directly</h2>
        <span className={styles.notch} aria-hidden="true" />
      </div>

      <div className={styles.panel}>
        {plans.map((plan) => {
          const selected = selectedPlanId === plan.id;
          return (
            <button
              key={plan.id}
              type="button"
              data-analytics-key="subscription.plan_select"
              data-analytics-label="Select coin plan"
              className={`${styles.row} ${selected ? styles.selected : ""}`}
              aria-pressed={selected}
              aria-label={`${plan.coins} Coins, ${plan.currency}${plan.price}`}
              onClick={() => onSelectPlan(plan.id)}
            >
              <span className={styles.coinIcon} aria-hidden="true">
                <FaCoins />
              </span>
              <span className={styles.coins}>{plan.coins} Coins</span>
              <span className={styles.badgeGroup}>
                {plan.mostPopular ? (
                  <span className={styles.popularBadge}>Most Popular</span>
                ) : null}
                {plan.isFirstRechargeOffer ? (
                  <span className={styles.offerBadge}>
                    {plan.firstRechargeDiscountPercent ?? 50}% OFF
                  </span>
                ) : null}
              </span>
              <span className={styles.priceGroup}>
                <span className={styles.price}>
                  {plan.currency}
                  {plan.price}
                </span>
                {plan.originalPrice ? (
                  <span className={styles.originalPrice}>
                    {plan.currency}
                    {plan.originalPrice}
                  </span>
                ) : null}
              </span>
            </button>
          );
        })}
      </div>
    </section>
  );
}
