<template>
	<div class="switch-box flex-between-center">
		<div class="item-text" :class="value === 'Daily' && 'active'" @click="handleClick('Daily')">Daily</div>
		<div class="diver"></div>
		<div class="item-text" :class="value === 'Weekly' && 'active'" @click="handleClick('Weekly')">Weekly</div>
		<div class="diver"></div>
		<div class="item-text" :class="value === 'Monthly' && 'active'" @click="handleClick('Monthly')">Monthly</div>
	</div>
</template>

<script>
export default {
	props: {
		value: {
			type: String,
			default: 'Daily'
		}
	},
	data() {
		return {}
	},
	methods: {
		handleClick(type) {
			this.$emit('input', type);
		}
	}
}
</script>

<style scoped lang="scss">
.switch-box {
	padding: 22px 40px;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 10px 30px 0 #0000000d;
	.diver {
		width: 1px;
		height: 36px;
		margin-left: 70px;
		margin-right: 70px;
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: #E2E8F0;
	}
	.item-text {
		font-size: 24px;
		font-family: 'Poppins-Regular', serif;
		color: #3A4A65;
		&:active {
			opacity: 0.8;
		}
	}
	.active {
		color: #7B61FF;
		font-weight: 900 !important;
		font-family: 'Poppins-Bold', serif;
	}
}
</style>
