import React from 'react';
import { useTranslation } from 'react-i18next';
import { OrderPaymentsProps } from '../utils/types';
import { OrderPaymentsWrapper, OrderPaymentTitle } from './style';

const OrderPayments = (props: OrderPaymentsProps): JSX.Element => {
  const { t } = useTranslation();
  const { payments } = props;

  return (
    <OrderPaymentsWrapper>
      <OrderPaymentTitle>{t('OS.KDS.Card.Payment')}</OrderPaymentTitle>
      {payments.map((payment) => (
        <div key={payment.id}>
          {payment.type}: {payment.amount}
        </div>
      ))}
    </OrderPaymentsWrapper>
  );
};

export default OrderPayments;