import { EPaymentMethod, IPaymentMethod } from "@/data/paymentMethods";
import styles from "./styles.module.css";

interface IPaymentMethodsChoiceProps {
  selectedPaymentMethod: EPaymentMethod;
  onSelectPaymentMethod: (method: EPaymentMethod) => void;
  paymentMethods: IPaymentMethod[];
}

function PaymentMethodsChoice({
  selectedPaymentMethod,
  paymentMethods,
  onSelectPaymentMethod,
}: IPaymentMethodsChoiceProps) {
  return (
    <div className={styles["payment-methods"]}>
      {paymentMethods.map((method, index) => (
        <div
          className={`${styles["payment-method"]} ${
            selectedPaymentMethod === method.id && styles.active
          }`}
          onClick={() => onSelectPaymentMethod(method.id)}
          key={index}
        >
          {method.component}
        </div>
      ))}
    </div>
  );
}

export default PaymentMethodsChoice;
