import type { FC } from 'react';
import React from 'react';
import { formatMessage } from '@theorchard/suite-frontend';
import FieldsSection from 'src/components/fieldsSection';
import type { AccountMetadata } from 'src/apollo/queries/account/selectors';

const CLASSNAME = 'AccountManagementInfoSection';
const TITLE = formatMessage('accountPage.accountManagement');

interface Props {
    account: AccountMetadata;
}

const ManagementInfoSection: FC<Props> = ({ account }) => {
    // TODO add values to reminding fields, once data is ready;
    const fields = [
        {
            label: formatMessage('contactName'),
            value: account.contactName,
        },
        {
            label: formatMessage('contactEmail'),
            value: account.contactEmail,
        },
        {
            label: formatMessage('serviceTier'),
            value: account.serviceTierName,
        },
        {
            label: formatMessage('relationshipManagerShort'),
        },
        {
            label: formatMessage('secondaryRelationshipManagerShort'),
        },
        {
            label: formatMessage('owner'),
            value: account.owner,
        },
        {
            label: formatMessage('assignedReviewer'),
        },
        {
            label: formatMessage('productManager'),
            value: account.productManager,
        },
        {
            label: formatMessage('accountPage.welcomeEmailSent'),
            value: account.welcomeEmailDate ? 'Yes' : 'No',
        },
        {
            label: formatMessage('reviewContext'),
        },
    ];

    return (
        <div className={CLASSNAME}>
            <FieldsSection title={TITLE} fields={fields} />
        </div>
    );
};

export default ManagementInfoSection;