import React from 'react';
import TableBasic from 'src/components/shared/table-basic';
import { smartFormatter } from 'src/utils/amount-helpers';
import { getCurrencyLabel } from 'src/utils/currency';
import type { PaymentGroupPaymentOverviewItem } from 'src/types/payment-group';

export interface PaymentGroupOverviewProps {
    isPaymentOverviewLoading: boolean;
    paymentOverviewDetails: PaymentGroupPaymentOverviewItem[];
}

export default function PaymentGroupOverview({
    isPaymentOverviewLoading,
    paymentOverviewDetails,
}: PaymentGroupOverviewProps) {
    const headers = ['Currency', 'Accounts', 'Amount'];

    const formatPaymentOverviewDetails = () =>
        paymentOverviewDetails.map((data, index) => {
            const { accountCount, currencyCode, currencyTotal } = data;
            return {
                id: index,
                cols: [
                    getCurrencyLabel(currencyCode),
                    accountCount,
                    smartFormatter(currencyTotal, currencyCode),
                ],
            };
        });

    return (
        <div className="PaymentGroup-overview">
            <TableBasic
                headers={headers}
                isLoading={isPaymentOverviewLoading}
                rows={formatPaymentOverviewDetails()}
            />
        </div>
    );
}