import React from 'react';
import { Alert, Section } from '@theorchard/suite-components';
import { GraphQLError } from 'graphql';

export interface ContractAdvanceSectionProps {
    content: React.ReactNode;
    count?: number;
    error?: Partial<GraphQLError>;
    expanded: boolean;
    title: string;
}

export const ContractAdvanceSection: React.FC<ContractAdvanceSectionProps> = ({
    content,
    count,
    error,
    expanded,
    title,
}) => (
    <Section expandable defaultExpanded={expanded} level="sub">
        <Section.Header>
            <div className="d-flex flex-column ContractAdvance-header">
                <div className="d-flex flex-row align-items-center ContractAdvance-header-title">
                    <Section.Title>{title}</Section.Title>
                </div>
                <div className="d-flex flex-row align-items-center suite-text-medium ContractAdvance-header-secondary-text">
                    {count} Advances
                </div>
            </div>
        </Section.Header>
        <Section.Body>
            {error ? (
                <Alert
                    className="errorMsg"
                    text={error.message}
                    variant="error"
                />
            ) : (
                content
            )}
        </Section.Body>
    </Section>
);

export default ContractAdvanceSection;