import React from 'react';
import { Icon } from '../../../shared/ui';
import OptionList from './OptionList';
import { paymentMeta } from '../payments';

export default function PaymentStep({ flow, labelledBy }) {
	return (
		<OptionList
			labelledBy={labelledBy}
			value={flow.paymentMethod}
			onSelect={(id, { pointer }) => {
				flow.actions.setPaymentMethod(id);
				if (pointer) flow.actions.next();
			}}
			items={flow.payOpts.methods.map((m) => {
				const meta = paymentMeta(m);
				return { id: m, title: meta.label, desc: meta.desc, media: <Icon name={meta.icon} size={22} /> };
			})}
		/>
	);
}