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 = 'AccountSummarySection';
const TITLE = formatMessage('accountPage.accountInfo');

interface Props {
    account: AccountMetadata;
}

const AccountSummarySection: FC<Props> = ({ account }) => {
    const fields = [
        {
            label: formatMessage('accountName'),
            value: account.name,
        },
        {
            label: formatMessage('company'),
            value: account.companyDisplayName,
        },
        {
            label: formatMessage('labelType'),
            value: account.type,
        },
        {
            label: formatMessage('accountPage.ownedAndOperated'),
            value: account.isOwned,
        },
        {
            label: formatMessage('country'),
            value: account.country,
        },
        {
            label: formatMessage('region'),
            value: account.region,
        },
        {
            label: formatMessage('accountPage.soundScanCodeUS'),
            value: account.soundScanCodeUSA,
        },
        {
            label: formatMessage('accountPage.soundScanCodeCA'),
            value: account.soundScanCodeCA,
        },
        {
            label: formatMessage('genre'),
            value: account.genre,
        },
        {
            label: formatMessage('accountPage.isDistributor'),
            value: account.isDistributor ? 'Yes' : 'No',
        },
        {
            label: formatMessage('accountPage.numberOfReleases'),
            value: account.estReleases,
        },
        {
            label: formatMessage('accountPage.defaultSalesSheet'),
            value: account.defaultSalesSheetTemplateId,
        },
        {
            label: formatMessage('website'),
            value: account.website,
        },
    ];

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

export default AccountSummarySection;