<!-- <script>
export const navitem = {
    props: ['icon', 'link']
}
</script>

<script setup>
import { Icon } from '@iconify/vue'

</script> -->


<script>
import { Icon } from '@iconify/vue'
import { RouterLink } from 'vue-router';

export default {
    name: 'navitem',
    props: {
        icon: String,
        link: String,
        active: Boolean
    },
    methods: {
        setActive() {
            // Your code here
            alert(`Hello ${event.target}!`)
        }
    },
    components: {
        Icon,
        RouterLink
    }
}
</script>

<template>
    <div class="aspect-square flex items-center place-content-center">
        <RouterLink :to="link" class="button" :class="{ active: active }">
            <Icon :icon="icon" />
        </RouterLink>
    </div>
</template>


<style scoped>
.button {
    color: var(--white);
    font-size: 35px;
    /* overflow: hidden; */
    /* height: 40px; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 10px;
    transition: color 0.2s ease-in-out;
}

.button:hover {
    color: var(--accent-primary);
}

.active {
    border: 2px solid var(--accent-primary);
    border-radius: 10px;
}
</style>