import type { FC } from 'react';
import React from 'react';
import { Section } from '@theorchard/suite-components';

const CLASSNAME = 'FieldsSection';
const CLASSNAME_FIELD = `${CLASSNAME}-field`;

interface SectionField {
    label: string;
    value?: string | number | null;
}

interface Props {
    fields: SectionField[];
    title: string;
}

const FieldsSection: FC<Props> = ({ title, fields }) => (
    <Section level="sub">
        <Section.Header title={title} />
        <Section.Body className={CLASSNAME}>
            {fields.map(field => (
                <div className={CLASSNAME_FIELD} key={field.label}>
                    <span>{field.label}</span>
                    <span>{field.value || '-'}</span>
                </div>
            ))}
        </Section.Body>
    </Section>
);

export default FieldsSection;