"use client";

import type { PayChannel } from "@/data/dto/payment";

import styles from "./subscription-payment-method.module.css";

const PAYMENT_METHODS: Array<{
  channel: PayChannel;
  title: string;
}> = [
  {
    channel: "stripe",
    title: "Stripe",
  },
  {
    channel: "ezpay",
    title: "Ezpay",
  },
];

export interface SubscriptionPaymentMethodProps {
  value: PayChannel;
  disabled?: boolean;
  onChange: (channel: PayChannel) => void;
}

export function SubscriptionPaymentMethod({
  value,
  disabled = false,
  onChange,
}: SubscriptionPaymentMethodProps) {
  return (
    <section className={styles.root} aria-labelledby="payment-method-title">
      <div className={styles.header}>
        <h2 id="payment-method-title" className={styles.title}>
          Payment Method
        </h2>
        <span className={styles.caption}>Stripe by default</span>
      </div>
      <div className={styles.options}>
        {PAYMENT_METHODS.map((method) => {
          const selected = method.channel === value;
          const classes = [
            styles.option,
            selected ? styles.selected : "",
          ]
            .filter(Boolean)
            .join(" ");

          return (
            <button
              key={method.channel}
              type="button"
              className={classes}
              disabled={disabled}
              aria-pressed={selected}
              onClick={() => onChange(method.channel)}
            >
              <span className={styles.optionTitle}>{method.title}</span>
            </button>
          );
        })}
      </div>
    </section>
  );
}
