<template>
	<button :class="buttonClass" :disabled="loading">
		<slot name="loader" v-if="loading">{{ $i18n.__('Loading', 'webtoffee-cookie-consent') }}</slot>
		<slot  v-else />
		<span class="wcc-btn-spinner" v-if="loading">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</span>
	</button>
</template>

<script>
export default {
	name: "BaseButton",
	components: {},
	data() {
		return {
			loading: false,
		};
	},

	methods: {
		startLoading() {
			this.loading = true;
		},
		stopLoading() {
			this.loading = false;
		},
	},
	computed: {
		buttonClass() {
			return {
				"wcc-button": true,
				"wcc-button-loading": this.loading === true,
			};
		},
	},
};
</script>
<style lang="scss">
@include wrap-class() {
	.wcc-button {
		position: relative;
		
	}
}
</style>