﻿<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const tabs = computed(() => [
	{ to: { name: 'today' }, label: t('nav.today') },
	{ to: { name: 'meals' }, label: t('nav.meals') },
	{ to: { name: 'ingredients' }, label: t('nav.ingredients') },
	{ to: { name: 'stats' }, label: t('nav.stats') },
	{ to: { name: 'settings' }, label: t('nav.more') },
])
</script>

<template>
	<nav class="app-bottom-tabs">
		<RouterLink
			v-for="tab in tabs"
			:key="tab.label"
			:to="tab.to"
			class="app-bottom-tabs__link"
		>
			{{ tab.label }}
		</RouterLink>
	</nav>
</template>
