import type { FC, ReactElement, ReactNode } from 'react';
import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { Button } from '../../bootstrap';

export const CLASSNAME = 'ModalHeader';

export interface Props {
    header?: string | ReactElement;
    button?: JSX.Element; // We could do conditional typing if !button, then onButtonClick should be required
    onButtonClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
    className?: string;
    subtitle?: ReactNode;
}

export const ModalHeader: FC<Props> = ({ header, className, button, onButtonClick, subtitle }) => (
    <header className={cx(className, CLASSNAME, 'ReactModal-header')}>
        {typeof header === 'string' ? <h3 className="ReactModal-header-text">{header}</h3> : header}

        {button || (
            <Button variant="control" className="ReactModal-close" onClick={onButtonClick}>
                <GlyphIcon name="close" size={16} />
            </Button>
        )}

        {subtitle && <div className="ReactModal-header-subtitle">{subtitle}</div>}
    </header>
);