import React, { FC } from 'react';
import { Card } from '@theorchard/suite-components';
import cx from 'classnames';

export const CLASSNAME = 'DataSection';
export const CLASSNAME_HEADER = `${CLASSNAME}-header`;
export const CLASSNAME_HEADER_TITLE = `${CLASSNAME}-header-title`;
export const CLASSNAME_SUBHEADER = `${CLASSNAME}-subheader`;
export const CLASSNAME_CONTENT = `${CLASSNAME}-content`;
export const CLASSNAME_EMPTY = `${CLASSNAME}-empty`;
export const CLASSNAME_FOOTER = `${CLASSNAME}-footer`;

export interface Props<T> {
    headerText: string;
    subHeaderText?: string;
    Content?: FC<T>;
    HeaderMenu?: FC<T>;
    className?: string;
    props?: T;
    children?: JSX.Element[] | JSX.Element;
}

function DataSection<T extends object>({
    headerText, subHeaderText, Content, HeaderMenu, className, props, children
}: Props<T>) {
    return (
        <Card className={cx(CLASSNAME, className)}>
            <div className={CLASSNAME_HEADER}>
                <h4 className={cx(CLASSNAME_HEADER_TITLE, 'mr-auto')}>
                    {headerText}
                </h4>
                {HeaderMenu && <HeaderMenu {...props as T} />}
            </div>
            { subHeaderText && (
                <h6 className={CLASSNAME_SUBHEADER}>{subHeaderText}</h6>
            )}
            {Content && (
                <Content {...props as T} />
            )}
            {children}
        </Card>
    );
}

export default DataSection;