<template>
	<button
		class="action-btn"
		:class="{ 'action-btn--disabled': disabled }"
		:disabled="disabled"
		v-on:click="$emit('click')"
	>
		<i v-if="hasIcon" class="action-btn__icon" :class="icon" />
		{{ text }}
	</button>
</template>
<script>
export default {
	name: "ActionBtn",
	computed: {
		hasIcon() {
			return this.icon != null && this.icon != "";
		},
	},
	props: {
		disabled: {
			default: false,
			required: false,
			type: Boolean,
		},
		icon: {
			required: false,
			type: String,
		},
		text: {
			required: true,
			type: String,
		},
	},
};
</script>
<style lang="scss"  scoped>
.action-btn {
	$height: 36px;

	background: $color-primary;
	border: none;
	border-radius: $border-radius;
	color: $color-text;
	cursor: pointer;
	display: inline-block;
	font-family: $font-family;
	font-size: 14px;
	height: $height;
	line-height: $height;
	outline: none;
	padding: 0 $padding-default;
	text-align: center;

	&:hover {
		background: $color-primary--darken;
	}

	&--disabled {
		background: $color-border !important;
	}

	&__icon {
		display: inline-block;
		font-size: 20px;
		margin-left: 5px;
		vertical-align: middle;
	}
}

[data-lang="en"] {
	.action-btn {
		&__icon {
			margin-left: 0;
			margin-right: 5px;
		}
	}
}
</style>