import { Prop, toNative } from 'vue-facing-decorator';
import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
import './css/button-message-container.css';

interface ButtonMessageContainerArgs {
	cssClass?: string;
	message: string;
}

@Component
class ButtonMessageContainerComponent extends TsxComponent<ButtonMessageContainerArgs> implements ButtonMessageContainerArgs {
	@Prop() cssClass!: string;
	@Prop() message!: string;

	render(h) {
		return (
			<div class={`bmc-container-wrap ${PowerduckState.getFormControlCssClass()}${!isNullOrEmpty(this.cssClass) ? ` ${this.cssClass}` : ''}`}>
				<div class="bmc-container-inner">
					<div class="bmc-container-message">{this.message}</div>
					{this.$slots.default?.()}
				</div>
			</div>
		);
	}
}

const ButtonMessageContainer = toNative(ButtonMessageContainerComponent);
export default ButtonMessageContainer;