<template>
    <div class="menu flex align-center" style="gap: 30px; padding-top: 10px">
        <router-link to="/MyPlan.page">
            <button :class="{ active: activeButton === 'schedule' }" type="submit" @click="goToApp('schedule')">
                <p :class="{ active: activeButton === 'schedule' }">학습일정계획</p>
            </button>
        </router-link>
        <router-link to="/Dashboard.page">
            <button :class="{ active: activeButton === 'dashboard' }" type="submit" @click="goToApp('dashboard')">
                <p :class="{ active: activeButton === 'dashboard' }">Dashboard</p>
            </button>
        </router-link>
        <router-link to="/MyPage.page">
            <button :class="{ active: activeButton === 'mypage' }" type="submit" @click="goToApp('mypage')">
                <p :class="{ active: activeButton === 'mypage' }">마이페이지</p>
            </button>
        </router-link>
    </div>
</template>

<script>
export default {
    props: {
        currentRoute: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            activeButton: '',
        };
    },
    methods: {
        goToApp(button) {
            this.activeButton = button;
        },

        // 경로에 따른 메뉴 버튼 설정
        updateActiveButton() {
            if (this.currentRoute === '/MyPlan.page') {
                this.activeButton = 'schedule';
            } else if (this.currentRoute === '/PreviewNote.page') {
                this.activeButton = '';
            } else if (this.currentRoute === '/Dashboard.page') {
                this.activeButton = 'dashboard';
            } else if (this.currentRoute === '/MyPage.page') {
                this.activeButton = 'mypage';
            }
        },
    },
    watch: {
        currentRoute() {
            this.updateActiveButton();
        },
    },
    mounted() {
        this.updateActiveButton();
        console.log('Menu mounted');
    },
};
</script>

<style></style>
