import {
    Button,
    ErrorMessage,
    LoadingIndicator,
} from '@theorchard/suite-components';
import React from 'react';
import type { FC, ReactNode } from 'react';

export interface OAPanelProps {
    title: string;
    children: ReactNode;
    footer?: ReactNode;
    editable: boolean;
    debug?: boolean;
    loading?: boolean;
    error?: boolean;
    onEdit?: () => void;
}

const OAPanel: FC<OAPanelProps> = ({
    title,
    children,
    editable,
    debug = false,
    error,
    loading,
    footer,
    onEdit,
}) => {
    return (
        <div className="OAPanel">
            <div className="OAPanel-header">
                <h3 className="OAPanel-title">{title}</h3>
                {(!editable || debug) && (
                    <Button
                        className="OAPanel-edit"
                        variant="link"
                        onClick={onEdit}
                    >
                        {$t('shared.oaPanel.edit')}
                    </Button>
                )}
            </div>
            <div className="OAPanel-body">
                {loading ? (
                    <LoadingIndicator title={false} />
                ) : error ? (
                    <ErrorMessage />
                ) : (
                    children
                )}
            </div>
            {footer && !loading && !error && (
                <div className="OAPanel-footer">{footer}</div>
            )}
        </div>
    );
};

export default OAPanel;