<template>
	<view class="favorite-loader" :class="animation || ''" :style="[getLoaderStyle]">
		<text v-if="isText">{{text}}</text>
	</view>
</template>

<script>
	export default {
		name: 'FavoriteLoading',
		props: {
			isText: {
				type: Boolean,
				default: true
			},
			text: {
				type: String,
				default: 'Loading...'
			},
			animation: {
				type: String,
				default: 'opacity'
			},
			color: {
				type: [Array, String],
				default: ''
			}
		},
		computed: {
			getLoaderStyle() {
				const styles = {}
				const color = this.color
				const animation = this.animation
				if (color) {
					if (Array.isArray(color) && color.length === 2) {
						styles[`--${animation}_0`] = color[0]
						styles[`--${animation}_1`] = color[1]
					} else {
						styles[`--${animation}`] = color
					}
				}
				return styles
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss">
@import './style.scss';
@import './dots.scss';
@import './bars.scss';
@import './spinner.scss';
@import './progress.scss';
@import './infinity.scss';
@import './pulsing.scss';
</style>
