import { bem } from '@/utils/bem'
import type { IPaymentMethod } from '@/features/payment-methods/types'
import PaymentMethodComponent from '@/features/payment-methods/PaymentMethod/PaymentMethod'
import './PaymentMethodsList.scss'

const block = 'payment-methods-list'

interface IPaymentMethodsListProps {
  methods: IPaymentMethod[];
  onMethodSelect?: (method: IPaymentMethod) => void;
}

function PaymentMethodsList({ methods, onMethodSelect }: IPaymentMethodsListProps) {
  return (
    <div className={block}>
      <h2 className={bem(block, 'title')}>Select Payment Method</h2>
      <div className={bem(block, 'grid')}>
        {methods.map((method) => (
          <PaymentMethodComponent
            key={method.id}
            method={method}
            onSelect={onMethodSelect}
          />
        ))}
      </div>
    </div>
  );
}

export default PaymentMethodsList;