"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;
}

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"
              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 size={18} />
              </span>
              <span className={styles.coins}>{plan.coins} Coins</span>
              <span className={styles.price}>
                {plan.currency}
                {plan.price}
              </span>
            </button>
          );
        })}
      </div>
    </section>
  );
}
