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

export const CLASSNAME = 'ApplicationBanner';

interface BtnProps {
    label: string;
    onClick: () => void;
}

export interface Props {
    title: string;
    subtitle?: string;
    defaultBtnProps?: BtnProps;
    primaryBtnProps?: BtnProps;
    className?: string;
    testId?: string;
}

export const ApplicationBanner: React.FC<Props> = ({
    title,
    subtitle,
    defaultBtnProps,
    primaryBtnProps,
    className,
    testId = CLASSNAME,
}) => (
    <div className={cx(CLASSNAME, className)} data-testid={testId}>
        <div className={`${CLASSNAME}-left`}>
            <h1 className={`${CLASSNAME}-title`}>{title}</h1>
            {subtitle && <span className={`${CLASSNAME}-subtitle`}>{subtitle}</span>}
        </div>

        <div className={`${CLASSNAME}-right`}>
            {primaryBtnProps && (
                <Button
                    variant="primary"
                    onClick={primaryBtnProps.onClick}
                    data-testid={`${CLASSNAME}-primaryBtn`}
                >
                    {primaryBtnProps.label}
                </Button>
            )}

            {defaultBtnProps && (
                <Button onClick={defaultBtnProps.onClick} data-testid={`${CLASSNAME}-defaultBtn`}>
                    {defaultBtnProps.label}
                </Button>
            )}
        </div>
    </div>
);