<template>
	<view v-if="Math.min(progress, 100) !== 100 || error" class="progressWrapper" :style="{ height: height, backgroundColor: backgroundColor }">
		<view v-if="!error" class="progressBar" :style="{ width: `${Math.min(progress, 100)}%`, backgroundColor: activeColor }"></view>
		<view v-else class="progressBar error"></view>
	</view>
</template>

<script>
export default {
	name: 'Progress',
	props: {
		progress: {
			type: Number,
			required: false,
			default: 100
		},
		error: { type: Boolean, required: false, default: false },
		height: {
			type: String,
			required: false,
			default: '2px'
		},
		activeColor: {
			type: String,
			required: false,
			default: '#29BBE4'
		},
		backgroundColor: {
			type: String,
			required: false,
			default: '#EBEBEB'
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
