import React from 'react';
import { Section } from '@theorchard/suite-components';
import './payment-detail-approved.scss';
import { PaymentDetailSectionHeader } from './payment-detail-section-header';
import PaymentDetailGrid from 'src/components/account-detail/payment-detail-grid';

export interface PaymentDetailApprovedProps {
    accountId: string;
    bankDetailsModifiedAt?: string;
}

const CLASS_NAME = 'PaymentDetailApproved';

const PaymentDetailApproved: React.FC<PaymentDetailApprovedProps> = ({
    accountId,
    bankDetailsModifiedAt,
}) => (
    <div className={CLASS_NAME} data-testid={CLASS_NAME}>
        <Section>
            <Section.Body>
                <Section>
                    <PaymentDetailSectionHeader
                        title="Payment Details"
                        lastModified={bankDetailsModifiedAt}
                        showSuccessGlyph
                        className={`${CLASS_NAME}__header`}
                    />
                    <Section.Body>
                        <PaymentDetailGrid accountId={accountId} />
                    </Section.Body>
                </Section>
            </Section.Body>
        </Section>
    </div>
);

export default PaymentDetailApproved;