<template>
	<div class="flex-center box">
		<div class="btn" @click="prevYear">
			<img :src="prevIcon" alt="Previous Year" />
		</div>
		<div style="width: 60px;text-align: center">{{ monthName }}</div>
		<div class="btn" @click="nextYear">
			<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
		</div>
	</div>
</template>

<script>
import IconPrev from '@/static/launches/icon_prev.png';
import IconNext from '@/static/launches/icon_next.png';
import IconNextDisabled from '@/static/launches/icon_next_disabled.png';
import IconPrevDisabled from '@/static/launches/icon_prev_disabled.png';

export default {
	data() {
		return {
		}
	},
	props: {
		value: {
			type: Number,
			default: () => new Date().getMonth() + 1
		}
	},
	methods: {
		prevYear() {
			if (this.value > 1) {
				this.$emit('input', this.value - 1);
			}
		},
		nextYear() {
			if (this.value < 12) {
				this.$emit('input', this.value + 1);
			}
		}
	},
	computed: {
		monthName() {
			const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
			return months[this.value - 1];
		},
		prevIcon() {
			return this.value > 1 ? IconPrev : IconPrevDisabled;
		},
		nextIcon() {
			return this.value < 12 ? IconNext : IconNextDisabled;
		},
		isNextDisabled() {
			return this.value >= 12;
		}
	},
}
</script>

<style scoped lang="scss">
.box {
	gap: 16px;
	color: #3A4A65;
	font-size: 24px;
	font-family: 'Poppins-SemiBold', serif;
	.btn {
		width: 48px;
		height: 48px;
		cursor: pointer;
		background-color: #FFFFFF;
		border-radius: 4px;

		&:active {
			opacity: 0.8;
		}

		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
