export type Props = {
	readonly flexFooter?: boolean;
	readonly okButtonText?: string;
	readonly okButtonType?: string;
	readonly cancelButtonText?: string;
	readonly cancelButtonType?: string;
	readonly children?: React.ReactNode;
};

type InternalProps = {
	readonly showCancelButton: boolean;
	onConfirm?: () => void;
	onDismiss?: () => void;
};

const ModalFooter: React.FC<InternalProps & Props> = props => {
	const classes = ['modal-footer'];
	if (props.flexFooter) {
		classes.push('d-flex', 'justify-content-between');
	}

	const footerClass = classes.join(' ');

	return props.children
		? <div className={footerClass}>{props.children}</div>
		: (
			<div className={footerClass}>
				{props.showCancelButton && (
					<button
						type='button'
						className={`btn btn-${props.cancelButtonType}`}
						data-dismiss='modal'
						onClick={props.onDismiss}
					>
						{props.cancelButtonText}
					</button>
				)}
				<button
					type='button'
					className={`btn btn-${props.okButtonType}`}
					onClick={props.onConfirm}
				>
					{props.okButtonText}
				</button>
			</div>
		);
};

export default ModalFooter;